我遇到以下问题:我的桌子有大桌子(3行)。我想修复thead和肢体滚动。我使用jQuery
但是当我向下滚动时,边框会消失。
$(document).ready(function() {
document.querySelector(".tableContainer").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thead").style.transform = translate;
});
});
.TableData {
border-collapse: collapse;
font-family: "Arial Narrow", "Franklin Gothic Medium", "Arial";
font-size: 1.05em;
width: 100%;
height: 60vh;
overflow-x: hidden;
.TableData td,
.TableData th {
border: 1px solid black;
padding: 2px;
}
.TableData>thead>tr>th {
border: 1px solid black;
padding: 2px;
background: #d9edf7;
vertical-align: middle;
text-align: center;
}
.TableData thead>tr {
border: 1px solid black;
}
.TableData>tbody>tr>th {
border: 1px solid black;
padding: 2px;
}
.TableData>tbody>tr.tr1 {
background: #eee;
font-weight: 600;
}
.TableData>tbody>tr.tr1>td {
vertical-align: middle;
text-align: center;
}
.TableData>tbody>tr.tr2 {
background: #d9edf7;
font-weight: 600;
}
.TableData>tbody>tr.tr2>td {
vertical-align: middle;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tableContainer" style="overflow-x:hidden;height:500px;">
<table class="TableData">
<thead>
<tr>
<th rowspan="3">some text</th>
<th rowspan="3">some text</th>
<th>some text</th>
<th colspan="6">some text</th>
<th colspan="4">some text</th>
<th colspan="10">some text some text</th>
<th colspan="3">some text</th>
<th rowspan="3">some text</th>
</tr>
<tr>
<th rowspan="2">%</th>
<th rowspan="2">№ </th>
<th rowspan="2">Вх-%</th>
<th colspan="3">some text</th>
<th rowspan="2">some text</th>
<th colspan="2">1</th>
<th colspan="2">2</th>
<th rowspan="2">Вх-%</th>
<th colspan="3">NTU</th>
<th rowspan="2">ΔNTU T2-T1</th>
<th rowspan="2">Кt,some text</th>
<th colspan="4">some text</th>
<th rowspan="2">some text</th>
<th rowspan="2">% some text</th>
<th rowspan="2">NTU</th>
</tr>
<tr>
<th>Т0</th>
<th>Т1</th>
<th>Т2</th>
<th>Вх-%</th>
<th>NTU</th>
<th>Вх-%</th>
<th>NTU</th>
<th>Т0</th>
<th>Т1</th>
<th>Т2</th>
<th>А420</th>
<th>Т420</th>
<th>А440</th>
<th>Т440</th>
</tr>
</thead>
</table>
</div>
P.S我尝试使用CSS,JS进行更多组合。这个jQuery很好的解决方案,但出了点问题。有人帮我解决这个问题。 https://jsfiddle.net/testuser1234/w1sb26y3/?
答案 0 :(得分:0)
您将必须固定tbody
的高度,然后将overflow-y
设置为允许滚动。
您可以尝试类似的操作(摘自How can I let a table's body scroll but keep its head fixed in place?)
.TableData thead {
display: table;
table-layout:fixed;
width: 100%;
}
.TableData tbody {
display: block;
height: 10em; //CHANGE THIS ACCORDING TO NEED
overflow-y: scroll;
}
.TableData tbody tr {
display: table;
table-layout:fixed;
width: 100%;
}
.TableData th, .TableData td {
width: auto;
border: 1px solid;
}