我有这个网格:
如果我将表格宽度从 100% 更改为自动,表格会水平折叠。
这是不可取的。如何使表格列(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/
关于html - 我怎样才能让我的 HTML 表格 100% 宽并且它的所有单元格只和它们的内容一样宽?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6663164/