CSS, чтобы столбец таблицы занимал как можно больше места, а другие столбцы - как можно меньше

Question

Мне нужно создать 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: <-----> <--------> 

Answer 1

Похоже на решение Алекса, но, возможно, немного легче реализовать в зависимости от вашей ситуации:

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

Вы также можете применить white-space:nowrap к ячейкам, если хотите избежать переноса.

Answer 2

Я далеко не эксперт по CSS, но это работает для меня (в IE, FF, Safari и Chrome):

td.zero_width {
    width: 1%;
}

Тогда в вашем HTML:

<td class="zero_width">...</td>

Answer 3

У меня не было успеха с width: 100%;, так как кажется, что без контейнера div, который имеет фиксированную ширину, это не даст ожидаемых результатов. Вместо этого я использую что-то вроде следующего, и это, кажется, дает мне мои лучшие результаты.

.column-fill { min-width: 325px; }

Таким образом, он может увеличиться в случае необходимости, и кажется, что браузер предоставит все дополнительное пространство для любого столбца, установленного таким образом. Не уверен, что это работает для всех, но сделал для меня в Chrome (не пробовал других) ... стоит попробовать.