Question

我有一个<table>，其中包含3列：

table {
  border: 1px dashed goldenrod;
}
td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td width="120">Some content</td>
    <td width="150">Some content</td>
    <td width="100%">Some content</td>
  </tr>
</table>

现在第3列设置为占据剩余宽度。但在我的情况下，虽然它确实拉伸并占据剩余宽度，但它会挤压前2列......

如果我没有给第3列/ td任何宽度，我能够看到前2列的指定宽度..

请帮帮我。

该表格已设置为width =“100％”

Answer 1

保留最后一列没有宽度，并将表格宽度设置为100％或所需的表格宽度。

Answer 2

示例：

http://jsfiddle.net/DanielDZC/6Ywkf/

Answer 3

当您将第三个td的宽度指定为100%时，它意味着其宽度应与其父级相同，在这种情况下，它是相应的tr。这就是第一个和第二个td被挤压的原因，因为第三个td试图占据整个行宽。

如果前两个td中绝对没有内容，那么您甚至无法看到它们。由于这些td中有一些内容，浏览器会将这两个内容分配给尽可能小的空间，其余的宽度会被第三个div占用。

请参阅jsfiddle上的demo，了解当上一个td的宽度为50%时会发生什么。您将看到它占据行宽的一半。

要解决此问题，请为前两个td指定百分比宽度，然后将第三个宽度留空。 Here是演示此方法的演示。

Answer 4

我建议不要混合百分比和像素。这将导致跨浏览器问题等。

您必须决定使用％或像素，然后将第3列宽度留空。

HTML宽度<table> </table>的问题

4 个答案: