如何最小化表列的寬度（展開一列）？

Question

我有一個簡單的兩列表，其中左側顯示行號，右側顯示代碼。我希望左側是沒有裁剪的最小尺寸，右側填充剩餘區域（整個桌子應該是100％寬度）。

<table> 
    <tr> 
    <td><pre>line numbers</pre></td> 
    <td><pre>code</pre></td> 
    </tr> 
</table> 

的問題是，如果右邊的內容是不是足夠大的額外空間也將是向左（行號列變得更寬，比它需要的）平衡。我如何強制所有額外的空間進入右欄？

Answer 1

只需在每一行中設置第二個td即可width: 100%; ...如果表格單元格的寬度超過容器，則它不會破解爲新行，因此它將僅強制所有內容與您的樣式緊密配合能夠。因此，在一列上設置100％的寬度，而在另一列上設置的寬度不會使該列中的單元格儘可能寬。

見琴： http://jsfiddle.net/tvEY3/

Answer 2

另一種方式來做到這一點：

td:nth-child(2) { width: 100%; } 

的jsfiddle：http://jsfiddle.net/SabdielRivera/n84xf/5/

Answer 3

您可以設置td twidth是width:100%達到你所需要的。這裏有一個fiddle

Answer 4

另一種解決方案是：

td:first-child { width: 1% } 

它不會裁剪您的內容，但會使得第一列儘可能地小