我这里有一个代码笔 - https://codepen.io/anon/pen/JLaqLz
它是一个向左/向右和向上/向下滚动的表。
向上/向下滚动时,我希望标题是粘性的。
这个简单的javascript是我发现的最佳方式。
标题的底部有一个边框,当内容滚动时应该是粘性的。
我认为滚动时我可以在javascriot中设置css的边框,但它似乎打破了滚动
任何人都可以看到为什么边框滚动以及如何滚动它。
document.getElementById('table').addEventListener("scroll", function () {
var translate = "translate(0," + this.scrollTop + "px)";
var myElements = this.querySelectorAll("thead");
//myElements.style.border = '2px solid red';
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.transform=translate;
}
});
答案 0 :(得分:1)
我将thead
样式更改为
thead{
background-color: red;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2000px-Solid_white.svg.png');
background-size: 100% 96%;
background-repeat: no-repeat;
}
document.getElementById('table').addEventListener("scroll", function () {
var translate = "translate(0," + this.scrollTop + "px)";
var myElements = this.querySelectorAll("thead");
//myElements.style.border = '2px solid red';
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.transform=translate;
}
});
body{
background: grey;
font-family: sans-serif;
}
.page{
background: white;
width: 1200px;
margin: 0 auto;
}
.table-con{
overflow: scroll;
max-width: 1200px;
height: 500px;
}
table{
/*table-layout: fixed;*/
border-collapse: collapse;
width: 1500px;
}
thead th:first-child{
width: 20px;
padding: 0;
}
th{
text-align: left;
}
thead{
background-color: red;
background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2000px-Solid_white.svg.png');
background-size: 100% 96%;
background-repeat: no-repeat;
}
tbody td{
border-bottom: 1px solid #aaa;
}
tbody tr:nth-child(even) td:not(:first-child){
background: yellow;
}
tbody td:first-child{
background: none;
border: none;
padding: 0;
}
th, td{
padding: 10px 5px;
}
<div class="page">
<div class="table-con" id="table">
<!-- <div class="white-block"></div>
<div class="white-block white-block-1"></div> -->
<table>
<thead>
<tr>
<th></th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 1 :(得分:1)
根据这个答案td border disappears when applying transform translate,问题来自于如何在表格上处理边界。
表将合并单元格上的边框,因此当thead的border-bottom
属性实际与底部单元格共享时。
上述回答建议使用border-collapse: separate;
,但在您的情况下,您可能会使用outline
代替border
。
document.getElementById('table').addEventListener("scroll", function () {
var translate = "translate(0," + this.scrollTop + "px)";
var myElements = this.querySelectorAll("thead");
//myElements.style.border = '2px solid red';
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.transform=translate;
}
});
&#13;
body{
background: grey;
font-family: sans-serif;
}
.page{
background: white;
width: 1200px;
margin: 0 auto;
}
.table-con{
overflow: scroll;
max-width: 1200px;
height: 500px;
}
table{
/*table-layout: fixed;*/
border-collapse: collapse;
width: 1500px;
}
thead th:first-child{
width: 20px;
padding: 0;
}
th{
text-align: left;
}
thead{
background: white;
outline: 3px solid red;
}
tbody td{
border-bottom: 1px solid #aaa;
}
tbody tr:nth-child(even) td:not(:first-child){
background: yellow;
}
tbody td:first-child{
background: none;
border: none;
padding: 0;
}
th, td{
padding: 10px 5px;
}
&#13;
<div class="page">
<div class="table-con" id="table">
<!-- <div class="white-block"></div>
<div class="white-block white-block-1"></div> -->
<table>
<thead>
<tr>
<th></th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
<tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr><tr>
<td></td>
<td>Data - 1256</td>
<td>Data - 1256 Data - 1256 Data - 1256</td>
<td>Data - 1256</td>
<td>1256</td>
<td>125</td>
<td>Data - abc</td>
<td>abc</td>
<td>abc</td>
<td>ABCDE</td>
</tr>
</tbody>
</table>
</div>
</div>
&#13;