我有这个网格:

如果我将表格宽度从 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/

10-12 12:53
查看更多