Таблица HTML. Как фиксированная, так и множественная ширина столбцов переменной

Мне нужно построить таблицу с 5 столбцами. Ширина таблицы является переменной (50% от ширины содержимого). Некоторые столбцы содержат кнопки фиксированного размера, поэтому эти столбцы должны иметь фиксированный, скажем, 100 пикселей. Некоторые столбцы имеют в них текст, поэтому я хочу, чтобы эти столбцы имели переменную ширину столбцов.

Например:

Столбец1: 20% (tablewidth - sum (fixedwidth_columns)) '

Столбец2: 100px

Столбец3: 40% (таблица ширины - сумма (fixedwidth_columns))

Столбец 4: 200px

Столбец5: 40% (таблица ширины - сумма (fixedwidth_columns))

Каков наилучший способ достичь этого?

Ответ 1

Вы можете установить table-layout: fixed для элемента table, а затем просто установите атрибут width на соответствующие <td> или <th> элементов:

table {
    table-layout: fixed;
}

JSFiddle Demo.

Из MDN:

Свойство CSS table-layout определяет алгоритм, который будет использоваться для расположение ячеек таблицы, строк и столбцов.

значения:

исправлено:
Ширина столбцов и столбцов задается шириной элементов table и col или шириной первой строки ячеек. Ячейки в последующих строках не влияют на ширину столбцов.

Ответ 2

до фиксированной ширины в таблице, вам нужно, чтобы свойство table-layout установлено в fixed; Поскольку вы смешиваете% и px, это не будет связным.

Вы можете установить только ширину px и, в конечном итоге, небольшое значение% и позволить другому столбцу использовать ширину, оставшуюся доступной. Пример: http://jsfiddle.net/M4Et8/2/

<table style='table-layout:fixed;width:100%' border='1'>
    <tr>
        <th style='width: 20%;'>Column1</th>
        <th style='width: 100px;'>Column2</th>
        <th >Column3</th>
        <th style='width: 200px;'>Column4</th>
        <th >Column5</th>
    </tr>
</table>