Question

在我们的网站上，我们有包含数据的表格。我们喜欢使用普通table获得的列宽，但我们喜欢td的边框底部来扩展页面的整个宽度，就像我们使用CSS：table { width:100% }一样，可以在demo table widths page上看到，它呈现如下：

redered image

是否可以实现与边框底部拉伸整个宽度的表格中的普通（非宽度100％）表格相同的列宽？

不，td { white-space: nowrap }与额外的width: 100% td相结合（请参阅上面的链接）并不好，因为有时候td很长，所以我们希望td s完全像普通表一样包装。

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

顺便问一下，是否有更好的方式（tm）显示HTML片段而不是链接到外部页面？我只能展示源代码，但是渲染HTML也非常具有说明性。

这最初是在Webmasters发布的，但是根据那里的建议，我现在（重新）在这里发布。

Answer 1

我终于明白了。

我的前几次尝试涉及浮动<td>和<tr> s，但显然我是在正确的轨道但是有错误的元素。

我认为您想要做的是浮动 <tbody> 。 <table>仍然是100％宽度，因此它会拉伸页面的整个宽度，但它内部的<tbody>将充当其他所有内容的容器，浮动它将从其<table>容器宽度大小的枷锁。

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

试试这个：

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

tbody {
  float: left;
}

td {
  border: 1px #000 solid;
}

Answer 2

您可以使用新的CSS属性min-width和max-width来绑定列大小，而无需明确设置它们。

要获得未指定表格宽度时要呈现的比例版本，我认为您必须让它正常渲染（删除表格宽度设置），然后使用javascript读取列宽并调整大小

使用jQuery来同步来自another question的两个表的列宽：

$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
       $(this).width($($("#t2 tr:first td")[i]).width());
})

扩展列宽应该是一个非常好的起点。

Answer 3

这非常难看，并不完全符合您的要求，但它适用于Firefox并且似乎得到了同样的要点......

<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>

<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>

</body>
</html>

Answer 4

我正在寻找这个问题的类似答案，但是我不明白你的意思

不，td {white-space：nowrap}结合额外的宽度：100％td（参见上面的链接）不好，因为有时tds很长，所以我们希望tds完全包裹在正常的表格中。

但无论如何，我找到了解决问题的方法。不确定它是否可以在这里使用，但它解决了我的问题。也许它对其他人有帮助。

我没有加入另一个td。我只是对内容的每一个td应用了100％。所以我可以为每个最后一个td添加一个类，或者我可以使用last-child选择器为我做。

类似的东西：

table
{
  width:auto;
}

table tr td:last-child
{
  width:100%;
}

表：如何实现“正常”td宽度，但100％表宽？

4 个答案: