如何使我的HTML表格100%宽并且其所有单元格只能与其内容一样宽？

Question

我有这个网格:

如果我将表格宽度从100%更改为自动,则表格会水平折叠.

这是不可取的.如何使表格列(td元素)自动缩小以适合其内容,同时表格和tr元素填充其父级的整个空间？

Answer 1

如何使表格列(td元素)自动缩小以适合其内容,同时表格和tr元素填充其父级的整个空间？

<table>和<tr>元素<td>和它们内部的元素一样宽.你不能让每一个都<td>像它的内容一样小,并使整个表格与可用空间一样宽,因为表格只能与其中的单元格一样宽.

(即与大多数HTML元素不同,<table>元素的大小不能独立于其内容.)

您可以将一个单元格设置为尽可能宽,但宽度为100%:

<table style="width: 100%; background: grey; color: white;">
     <tr>
         <td style="background: red;">Content</td>
         <td style="background: green;">Content</td>
         <td style="background: blue; width: 100%;">Content</td>
     </tr>
</table>

见http://jsfiddle.net/9bp9g/