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

Question

我有这个网格：

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

哪个不可取。如何使表格列（td元素）自动缩小以适合其内容，同时，表格和tr元素填充其父级的整个空间？

Answer 1

  

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

<table>和<tr>元素与其中的<td>元素一样宽。你不能让每个<td>与其内容一样小和使整个表格与可用空间一样宽，因为该表格只能与单元格一样宽在里面。

（即与大多数HTML元素不同，<table＆gt;元素的大小无法独立于其内容。）

您可以将一个单元格设置为尽可能宽，但宽度为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/

Answer 2

<td>的宽度将由<td>中<tr>的宽度定义。

否则，您可以使用CSS定义<td>宽度的规则，如：

.myform tr td{padding:0px;margin:0px;}
.myform td{width:200px;}