CSS使表格列佔用儘可能多的空間，其他cols儘可能少

我需要用CSS佈局html數據表。CSS使表格列佔用儘可能多的空間，其他cols儘可能少

該表的實際內容可能不同，但總是有一個主列和兩個或多個其他列。我希望主列儘可能寬，不管其內容如何，而其他列佔用的寬度儘可能小。我無法爲任何列指定確切的寬度，因爲它們的內容可能會更改。

我怎樣才能做到這一點使用簡單的語義有效的HTML表和CSS只？

例如：

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

來源

2008-09-23 EvilPuppetMaster

哦，並且採用了跨瀏覽器兼容的方式。而且沒有javascript :-) – EvilPuppetMaster 2008-09-23 01:33:12

我從一個CSS專家很遠，但這個工作對我來說（在IE，FF，Safari和Chrome）：

td.zero_width { 
    width: 1%; 
}

然後在你的HTML ：

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

來源

2008-09-23 01:38:07

嗯，它包裹了'Col 2'和'Column 3'的內容，但是我可以用nowrap來修復它。謝謝！ – EvilPuppetMaster 2008-09-23 02:08:46

與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應用於單元格。

來源

2008-09-23 02:06:40 Dan

我還沒有成功與width: 100%;，因爲它似乎沒有一個具有固定寬度的容器div這將不會得到預期的結果。相反，我使用類似以下的東西，它似乎給了我最好的結果。

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

這樣可以得到更大的，如果需要，它似乎是取其列設置這樣的瀏覽器將會給所有的額外空間。不知道它是否適用於所有人，但是對我來說是否適用於鉻（沒有嘗試過其他）......值得一試。

來源

2013-05-31 18:35:36 daveomcd

CSS使表格列佔用儘可能多的空間，其他cols儘可能少

回答

相關問題