Question

当我滚动浏览此溢出时，我无法让这些td的边界跟随它们的行：auto; <tbody>。关于修复的任何想法？

注意：设置 table-layout：fixed 或使行 display：block 不是一个选项，因为行将失去流动性。

你可以在最新的Firefox中看到这个问题，所以我认为它在其他地方搞砸了。

这是我设置的测试（滚动到演示的底部）： http://www.webdevout.net/test?01y

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <table>
     <thead><th>One</th><th>Two</th><th>Three</th></thead>
     <tbody>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
<tr><td>Item</td><td>Item</td><td>Item</td></tr>
     </tbody>
    </table>
  </body>
</html>

CSS：

table {width:100%;border-collapse:collapse;}
tbody {height:200px;overflow:auto;}
td {border-bottom:1px solid #f00;}

Answer 1

在IE中也不起作用。 This总结得很好：“CSS 2.1规范第11.1.1节定义的溢出属性不适用于表行组对象。”

这里有几个解决方法，详见this recent question on SO。 link from the OP有两个有趣的解决方案，如果你不能改变输出，第一个解决方案可能对你有用。它主要涉及将表包装在两个div中，将内部div设置为overflow：auto，并将thead相对于外部div绝对定位，以便将其拉出内部容器。

Answer 2

不确定为什么在FF中出现时髦的行为，但解决方案是创建两个表并将第二个表放在div中。

HTML：

<table>
 <thead>
  <th>One</th><th>Two</th><th>Three</th>
 </thead>
</table>
<div>
 <table>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
  <tr><td>Item</td><td>Item</td><td>Item</td></tr>
 </table>
</div>

CSS：

table {width:100%;border-collapse:collapse;}
div {height:200px;overflow:auto;}
th {width:33%;}
td {border-bottom:1px solid #f00;width:33%;}

我为ths和tds添加了特定的宽度，以确保列对齐，因为它们位于不同的表中，但您可能不必指定。

tbody td border不在tbody overflow：auto中滚动内容;

2 个答案: