html - 表格 : How to achieve “normal” td widths, 但表格宽度为 100%？

Question

在我们的网站上，我们有包含数据的表格。我们喜欢使用普通 table 获得的列宽，但我们喜欢 td 的 border-bottom 像使用 CSS 获得的那样拉伸(stretch)页面的整个宽度: table { width:100% }，可以在 demo table widths page 上看到，呈现如下:

在 border-bottom 延伸整个宽度的表格中，是否可以实现与普通(非宽度 100%)表格相同的列宽？

不，td { white-space: nowrap } 与额外的 width: 100% td 组合(见上面的链接) 不好，因为有时 td 很长，所以我们希望 td 完全像在普通表中一样换行。

我们需要一个至少适用于 IE6-8 + FF 的解决方案。

顺便说一句，有没有比链接到外部页面更好的方式 (tm) 来显示 HTML 片段？我可以只显示源代码，但也呈现 HTML 非常说明问题。

这最初发布于 Webmasters ，但根据那里的建议，我现在(重新)将其张贴在这里。

Answer 1

我终于明白了。

我最初的几次尝试处理 float <td> s 和 <tr> s，但显然我在正确的轨道上，但元素错误。

我认为你想要做的是 float <tbody> 。 <table>仍然是 100% 宽度，所以它会拉伸(stretch)页面的整个宽度，但是 <tbody>它的内部将充当其他所有东西的容器，漂浮它将使它摆脱其 <table> 大小的束缚。容器宽度。

这样做的缺点是您将无法使用 <thead>或 <tfoot>元素，因为您将无法再将它们与 <tbody> 对齐内容。

试试这个:

table {
  width: 100%;
  border: 1px #000 solid;
}

tbody {
  float: left;
}

td {
  border: 1px #000 solid;
}