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

Question

Мне нужно разложить html datatable с CSS.

Фактическое содержание таблицы может отличаться, но всегда есть один главный столбец и 2 или более других столбца. Я хотел бы сделать основной столбец максимально шириной MUCH, независимо от его содержимого, в то время как другие столбцы занимают минимальную ширину. Я не могу указать точную ширину для любого из столбцов, потому что их содержимое может измениться.

Как это сделать, используя только семантически допустимую таблицу html и css?

Например:

 
| Main column       | Col 2 | Column 3 | 
<------------------ fixed width in px -------------------> 
<------- as wide as possible ---------> 
Thin as possible depending on contents: <-----> <--------> 

Answer 1

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

td.zero_width { 
    width: 1%; 
} 

Затем в HTML :

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

Answer 2

Аналогично решению 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 к ячейкам, если хотите избежать обертывания.

Answer 3

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

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

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