gpt4 book ai didi

css - tbody td 边框不随 tbody 中的内容滚动溢出 :auto;

转载 作者:太空宇宙 更新时间:2023-11-04 05:31:36 24 4
gpt4 key购买 nike

当我滚动浏览这个 overflow:auto; 时,我无法让这些 td 的边框跟随它们的行; <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;}

最佳答案

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

这里有几个解决方法,详见 this recent question on SO . link from the OP有两个有趣的解决方案,如果您不能更改输出,第一个可能对您有用。它主要涉及将表格包裹在两个 div 中,将内部 div 设置为溢出:自动,并相对于外部 div 绝对定位 thead,以便将其拉出内部容器。

关于css - tbody td 边框不随 tbody 中的内容滚动溢出 :auto;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2852981/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com