gpt4 book ai didi

html - 用两个表格模拟一个固定的表头行,但是左右滚动时表头出现断线

转载 作者:行者123 更新时间:2023-11-28 12:55:45 24 4
gpt4 key购买 nike

我似乎无法弄清楚,如果表格主体左右滚动,为什么我的 div/表格列行会出现断线。他们似乎也超出了我的 html 数据表的右侧,我该如何解决这两个问题。我附上了问题的图片:

enter image description here

这是 fiddle - http://jsfiddle.net/EPq69/

这是 HTML 标记:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#data_container {
border: 1px solid blue;
width: 100%;
}
#data_wrapper {
width: 100%;
border-right:0px;
height: 150px;
overflow-x: scroll;
}
#data_headers, #data_body {
width: 100%;
padding: 0px;
border-spacing: 0px;
table-layout: fixed;
}
#data_headers {

}
#data_body {

}
#data_headers td, #data_body td {
border-right: 1px solid green;
width: 150px;
}
#data_headers td {
border-bottom: 1px solid black;
}
</style>

</head>

<body>

<div id="data_container">

<table id="data_headers">
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
<td>Header5</td>
<td>Header6</td>
<td>Header7</td>
<td>Header8</td>
<td>Header9</td>
<td>Header10</td>
</tr>
</table>
<div id="data_wrapper">
<table id="data_body">
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>

</table>

</div>
</div>
</body>

</html>

最佳答案

将 overflow-x 放在容器上。如果您在其中一个表上设置了 overflow-x,则只有该表会滚动,而另一个表不会滚动,这就是您获得偏移量的原因。如果放在容器上,两者可以同时滚动

#data_container {
border: 1px solid blue;
width: 100%;
overflow-x: scroll;
}
#data_wrapper {
width: 100%;
border-right:0px;
height: 150px;
}

http://jsfiddle.net/EPq69/1/

关于html - 用两个表格模拟一个固定的表头行,但是左右滚动时表头出现断线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22515533/

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