我似乎无法弄清楚，如果表格主体左右滚动，为什么我的 div/表格列行会出现断线。他们似乎也超出了我的 html 数据表的右侧，我该如何解决这两个问题。我附上了问题的图片:
这是 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;
}
关于html - 用两个表格模拟一个固定的表头行，但是左右滚动时表头出现断线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22515533/