CSS, чтобы столбец таблицы занимал как можно больше места, а другие столбцы как можно меньше
Мне нужно разметить HTML-файл с данными с помощью CSS.
Фактическое содержимое таблицы может отличаться, но всегда есть один основной столбец и 2 или более других столбца. Я хотел бы, чтобы основной столбец занимал как можно больше ширины, независимо от его содержимого, в то время как другие столбцы занимали как можно меньшую ширину. Я не могу указать точную ширину для любого из столбцов, потому что их содержимое может меняться.
Как я могу это сделать, используя только простую семантически допустимую таблицу html и css?
Например:
| Main column | Col 2 | Column 3 | <------------------ fixed width in px -------------------> <------- as wide as possible ---------> Thin as possible depending on contents: <-----> <-------->
Ответы 3
Я далеко не специалист по CSS, но у меня это работает (в IE, FF, Safari и Chrome):
td.zero_width {
width: 1%;
}
Затем в вашем HTML:
<td class = "zero_width">...</td>
Ах да, он обертывает содержимое столбца 2 и столбца 3, но я могу исправить это с помощью nowrap. Спасибо!
Подобно решению Alexk, но, возможно, немного проще реализовать в зависимости от вашей ситуации:
<table>
<tr>
<td>foo</td>
<td class = "importantColumn">bar</td>
<td>woo</td>
<td>pah</td>
</tr>
</table>
.importantColumn{
width: 100%;
}
Вы также можете применить white-space:nowrap к ячейкам, если хотите избежать переноса.
У меня не было успеха с width: 100%;, поскольку кажется, что без контейнера div с фиксированной шириной это не приведет к ожидаемым результатам. Вместо этого я использую что-то вроде следующего, и это, кажется, дает мне лучшие результаты.
.column-fill { min-width: 325px; }
Таким образом, при необходимости он может увеличиваться в размерах, и кажется, что браузер предоставит все дополнительное пространство любому столбцу, установленному таким образом. Не уверен, что это работает для всех, но для меня это было в хроме (не пробовал другие) ... стоит попробовать.
Да, и кроссбраузерно. И никакого javascript :-)