多个带有粘滞标题和水平滚动的表格

Question

我想要两个并排的桌子...

1. 共享同一垂直滚动
2. 有单独的水平滚动
3. 具有粘性标题

。所有这些都在一个宽度和高度灵活的容器中。

这是我尝试的代码笔： https://codepen.io/numberjak/pen/gOYGEKz

如您所见，我已经勾选了我的所有要求，除了两个表都有粘性标题。

<div class="container">
<div class="scroll red">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll blue">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>

html {
height: 100%;
background-color: black;
}
div {
display: flex;
}
.container {
overflow: auto;
align-items: flex-start;
max-height: 20rem;
}
thead th {
position: sticky;
top: 0;
background-color: grey;
}
td, th {
min-width: 30rem;
padding: 1rem;
background-color: white;
}
tr {
height: 10rem;
}
.scroll {
overflow: auto;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}

Answer 1

标题和表的主体仍然连接，它们仍将具有相同的滚动属性。现在，要让它们不再"工作"为表格，您可以设置显示：块。这样就分开了。

你可以把它添加到你的css中

table tbody, table thead
{
display: block;
}
table tbody 
{
overflow: auto;
height: 100px;
}

滚动问题可以用一些javascript修复！

$(".red tbody").scroll(function() {
$(".blue tbody").scrollTop($(".red tbody").scrollTop());
});
$(".blue tbody").scroll(function() {
$(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});

所以最终产品看起来像这样

$(".red tbody").scroll(function() {
$(".blue tbody").scrollTop($(".red tbody").scrollTop());
});
$(".blue tbody").scroll(function() {
$(".red tbody").scrollTop($(".blue tbody").scrollTop() );
});

html {
height: 100%;
background-color: black;
}
div {
display: flex;
}
.container {
overflow: auto;
align-items: flex-start;
max-height: 20rem;
}
thead th {
position: sticky;
top: 0;
background-color: grey;
}
td, th {
min-width: 30rem;
padding: 1rem;
background-color: white;
}
tr {
height: 10rem;
}
.scroll {
overflow: auto;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
table tbody, table thead
{
display: block;
}
table tbody 
{
overflow: auto;
height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="scroll red">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="scroll blue">
<table>
<thead>
<tr>
<th>Scroll 1</th>
<th>Scroll 2</th>
<th>Scroll 3</th>
<th>Scroll 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>