代码之家 › 专栏 › 技术社区 › tester

tbody td borders not scrolling with content in tbody overflow:自动;

html-table css

tester · 技术社区 · 14 年前

我无法让这些td的边界跟随它们的行滚动通过溢出:auto; <tbody> . 有什么解决办法吗?

注:设置 表格布局:固定 或排成排 显示:块 不是一个选项,因为行将失去其流动性。

您可以在最新的Firefox中看到这个问题, 所以我想是其他地方搞砸了。

下面是一个测试i设置(滚动到底部进行演示): 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;}

2 回复 | 直到 7 年前

Community CDub 7 年前

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

这里有一些解决方法,如 this recent question on SO . 这个 link from the OP 有两个有趣的解决方案,如果你不能改变输出,第一个可能对你有用。它基本上包括将桌子包装在两个分区中,将内部分区设置为溢出:自动,并绝对定位相对于外部分区的thead,以便将其从内部容器中拉出。

mVChr 14 年前

不知道为什么在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和td添加了特定的宽度,以确保列对齐,因为它们位于不同的表中,但您可能不必指定。

推荐文章

Mona Jalal · 在HTML中使用PHP显示表的内容

2 年前

free · 基于特定默认列对表进行排序

2 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

2 年前

Bryan Santos · 固定表头与引导

2 年前

Muhammad Moosa Zubairy · 在div之后得到不需要的逗号

3 年前

buckshot · 使用CSS隐藏gridview中的某些列

3 年前

SeniorFluffie · 完整动态HTML表悬停事件不工作

6 年前

Smithy · 如何将此文本置于电子邮件模板中表格行的中心

6 年前

user7158897 · 如何基于地图区域单击显示/隐藏不同的表内容

6 年前

user9727941 · 不知道如何在空白td中插入这些数据

6 年前