表格：如何实现“正常”的单元格宽度，但表格宽度为100%？

Question

表格：如何实现“正常”的单元格宽度，但表格宽度为100%？

htmlcss

3

在我们的网站上，我们有包含数据的表格。我们喜欢使用普通的 table 来获得列宽，但我们希望 td 的下边框能像 CSS 中的 table { width:100% } 一样延伸到整个页面宽度，就像在演示表宽度页面上所见:

redered image

在一个底边框占满整个宽度的表格中，能否实现与普通的 (非宽度为100%) 表格相同的列宽？

而且，不，td { white-space: nowrap } 与额外的 width: 100% td (参见上面的链接) 结合使用不好，因为有时候 tds 很长，所以我们希望 tds 能像普通表格一样精确地换行。

我们需要在至少 IE6-8 + FF 中有效的解决方案。

顺便说一句，有没有比链接到外部页面更好的展示 HTML 片段的方法? 我可以只显示源代码，但同时显示 HTML 渲染结果非常直观。

这篇文章最初发布在 Webmasters，但根据那里的建议，现在我在这里重新发布它。

- Peter V. Mørch

1

您还可以在问题中内联发布图像，以显示呈现的版本。 - Brad Mace

抱歉，伙计，我已经玩了两个小时，但是我还是想不出来。唯一的方法就是嵌套表格... - Stephan Muller

4个回答

1

您可以使用新的CSS属性min-width和max-width来限制列的大小，而无需显式设置它们。

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

从另一个问题中提取了使用jQuery同步两个表格列宽的示例：

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

这应该是扩展列宽的一个很好的起点。

- Brad Mace

感谢您的回答，bemace。这些表格包含动态内容，因此我不知道在一般情况下应该将min-width和max-width设置为多少。“先正常渲染，然后读取宽度，然后调整大小”的方法存在各种问题，因为这在我们的应用程序中使用得非常广泛：窗口调整大小处理需要更多的JavaScript，就像ajax更新或mouseover效果也会导致表格“调整大小”。这是可以做到的。但并不简单。因此在这里提问！;-) - Peter V. Mørch

1

这看起来相当丑陋，也不完全符合您的要求，但它在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>

- joelt

我发布了一个HTML版本（我已经仔细设置了边距等），在FF中看起来很棒，正如你所指出的。然而，在IE中它看起来很糟糕。感谢您的建议！ - Peter V. Mørch

0

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

不，td { white-space: nowrap }结合额外的宽度：100% td（见上面的链接）并不好，因为有时候tds很长，所以我们希望tds能像普通表格一样正常换行。

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

我没有添加另一个td。我只是将内容的每个最后一个td应用了100％。因此，我可以为每个最后一个td添加一个类来执行此操作，或者我可以使用last-child选择器来为我执行此操作。

类似于：

table
{
  width:auto;
}

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

- cowgirl

添加另一个 td 或设置 td:last-child { width:100% } 的问题在于，这与“普通表格”的呈现方式不同。将 OP 中截图的前三分之一与后三分之一进行比较。我希望保留截图前三分之一的呈现/间距，但是下划线要跨越整个页面宽度。 - Peter V. Mørch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AgentConundrum · Accepted Answer

我终于想通了。

我的前几次尝试都涉及到浮动<td>和<tr>，但显然我走了错误的路线却选择了错误的元素。

我认为你想要做的是将<tbody>浮动。这样<table>仍将是100％宽度，因此会在页面上横跨整个宽度，但其中的<tbody>将作为所有其他内容的容器，并将其浮动以释放其从<table>容器宽度的束缚中解脱出来。

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

试试这个：

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

tbody {
  float: left;
}

td {
  border: 1px #000 solid;
}