html - 我怎样才能让我的 HTML 表格 100% 宽并且所有单元格的宽度都与其内容一样宽？

Question

我有这个网格:

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

这是不可取的。如何让表格列(td 元素)自动收缩以适应其内容，同时表格和 tr 元素填满其父元素的整个空间？

Answer 1

How can I make the table columns (td elements) shrink automatically to fit their content, while at the same time, the table, and tr elements fill the entire space of their parent?

<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/