如何最小化表格列的宽度(展开一列)？

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:first-child { width: 1% }

它不会裁剪您的内容,但会使第一列尽可能小