Question

我有一个HTML表格，所有列都有固定的宽度，除了一列我希望它是“填充”，它用最小宽度设置填充剩余的空间。我尝试使用width: auto，但这并没有填补余下的空间。

Answer 1

这不是在表格中编写代码的标准方法，但您可以指定表格宽度，为前两个tds设置一个宽度，而不指定第三个宽度：JS Fiddle

<table width="100%">
    <tr>
        <td bgcolor="blue" width="100">test</td>
        <td bgcolor="red" width="100">test2</td>
        <td bgcolor="yellow">test3</td>
    </tr>
</table>

Answer 2

这是一个示例，其中表格与最小宽度元素内的宽度一样宽。

http://codepen.io/anon/pen/DaLpf/

诀窍是为所有列提供固定宽度或宽度为1px，并使用white-space: nowrap;来适应内容宽度;然后给空间填充列的宽度为auto。在这种情况下，该表的宽度为100％。

HTML示例

<div>
<table>
  <tbody>
    <tr><td>Some Content</td><td>Fill Column</td></tr>
  </tbody>
</table>
</div>

CSS

div {
  display: inline-block;
  min-width: 500px;
  background-color: lightgrey;
  border: 10px solid grey;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid black;
  padding: 0 25px;
  line-height: 30px;
  white-space: nowrap; 
  width: 1px;
}
td:last-of-type {
  color:red;
  width: auto;
}

这有帮助吗？它很棘手，有很多方法可以达到你想要的结果。

如何使列宽=填充

2 个答案: