Personal Notes: Compatible with IE10, 11/firefox/chrome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.table1{
position:absolute;
display: block;
height: 48%;
border-collapse:collapse;
padding-top: 52px;
font-size: 18px;
/* border: 1px solid green; */
}
.table1>thead{position: absolute;top: 0;}
.table1>thead>tr>th{table-layout:fixed;}
.table1>tbody{display: block;height:100%;overflow-y: scroll;overflow-x: hidden;}
th, td{border: 1px solid green;width: 300px; height: 50px;text-align: center;}
/*.table1>thead>tr:first-child>th{border-top: 0;}*/
/* .table1>thead>tr>th:last-child{border-right: 0;width: 15px; border-left: 0;}
.table1>thead>tr>th:nth-last-child(2){border-right: 0;}
.table1>thead>tr>th:first-child{border-left: 0;}
.table1>tbody>tr>td:first-child{border-left: 0;}
.table1>tbody>tr>td:last-child{border-right: 0;} */
</style>
</head>
<body>
<table class="table1">
<thead>
<tr>
<th>213</th>
<th>123</th>
<th>123</th>
<!-- <th></th> -->
</tr>
</thead>
<tbody>
<tr>
<td>TD first line</td>
<td>TD first row second column</td>
<td rowspan="16">TD first row, third column</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
<tr>
<td>I am td ah ah ah ah ah</td>
<td>I am td ah ah ah ah ah</td>
</tr>
</tbody>
</table>
</body>
</html>
The effect is as follows:
Problem 1. The scroll bar is outside the tbody
2. The border below the table disappears when scrolling
The effect after opening the comment code is as follows:
Chrome custom scrollbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.table1{
position:absolute;
display: block;
height: 48%;
border-collapse:collapse;
padding-top: 52px;
font-size: 18px;
border: 1px solid green;
}
.table1>thead{position: absolute;top: 0;}
.table1>thead>tr>th{table-layout:fixed;}
.table1>tbody{display: block;height:100%;overflow-y: scroll;overflow-x: hidden;}
th, td{border: 1px solid green;width: 300px; height: 50px;text-align: center;}
.table1>thead>tr:first-child>th{border-top: 0;}
.table1>thead>tr>th:last-child{border-right: 0;}
/*.table1>thead>tr>th:last-child{border-right: 0;width: 15px; border-left: 0;}*/
/*.table1>thead>tr>th:nth-last-child(2){border-right: 0;}*/
/* remove double border */
.table1>thead>tr>th:first-child{border-left: 0;}
.table1>tbody>tr>td:first-child{border-left: 0;}
.table1>tbody>tr>td:last-child{border-right: 0;}
/*chrome custom scrollbar --start*/
.my-scroll::-webkit-scrollbar {width:0.5rem;}
.my-scroll::-webkit-scrollbar-button{background-color: green; height: 1px; }
.my-scroll::-webkit-scrollbar-track{background: rgba(255,255,255,0.2); }
.my-scroll::-webkit-scrollbar-thumb{background:rgb(121, 120, 120); border-radius:10px;height: 20%; }
.my-scroll-null-th{width: 0.1rem;}
/*chrome custom scrollbar --end*/
</style>
</head>
<body>
<table class="table1">
<thead>
<tr>
<th>213</th>
<th>123</th>
<th>123</th>
<!-- <th></th> -->
</tr>
</thead>
<tbody class="my-scroll">
<!-- The content of the tbody structure is the same as above, just copy it -->
</tbody>
</table>
</body>
</html>
The effect is as follows:
The scroll bar style modification only supports chrome, but not ie. For details, please refer to:
Another: jQuery scroll bar plugin jquery.mCustomScrollbar various styles of scroll bars