Столбцы фиксированного размера

Question

У меня есть плагин jQuery, который создает, заполняет и форматирует таблицы. У меня уже есть право на создание и заполнение, но форматирование все еще ускользает от меня.

Столы всегда шириной 800px (чтобы упростить свою жизнь, я разработал свой веб-сайт таким образом; я в основном парень с левым мозгом, музыка - единственный вид искусства, который я могу понять и создать), но число столбцов и их отдельные свойства (заголовок, ширина, выравнивание) являются переменными:

$
.grid('MostSoldBySales', 'Most sold products by total sales', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Sales'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
.grid('MostSoldByWeight', 'Most sold products by total weight', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Weight'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
;

Моя основная проблема связана с шириной столбцов: мне очень нужен способ сделать столбцы такими же широкими, как указано. Я не хочу, чтобы браузер изменял размер столбцов по любой причине. Я думаю, что эта функция есть даже в Visual Basic. Как мне это сделать с помощью CSS?

Answer 1

Один надежный способ, который я знаю, - это помещать DIV в каждый TD. Ширина, которую вы указываете для TD, принимается только как рекомендация (даже в современных браузерах), и столбцы будут сжиматься, если окно слишком узкое. Так что это всегда будет жестко шириной 200 пикселей:

<table>
  <tr>
    <td>
      <div style="width:200">Some stuff</div>
    </td>
  </tr>
</table>

Answer 2

Хотя это и не очень практично, вы можете попробовать обернуть ширину в двойные кавычки и добавить! Важно, что это так:

{css: {'text-align': 'left',  width: "360px !important"      }, children: 'Comments'}

Answer 3

Я думаю, что ваша проблема в том, что вы задаете браузеру противоречивые размеры.Вы говорите, что элементы <table> имеют ширину 800px, но ваши три столбца составляют всего 640px.Вам нужно будет добавить еще 160 пикселей где-нибудь.С другими наборами столбцов вы должны убедиться, что ширина столбцов составляет 800px.

Вы можете попробовать использовать table-layout: fixed на вашем <table>.Это должно вызвать проблему и прекратить любую обратную связь между таблицей и ее ячейками.

Answer 4

Вы можете попробовать использовать 'min-width': '120px'