个人笔记：兼容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第一行</td>
<td>TD第一行第二列</td>
<td rowspan="16">TD第一行第3列</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
<tr>
<td>我是td啊啊啊</td>
<td>我是td啊啊啊</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下：
问题1.滚动条在tbody外侧
2.滚动时表格下方边框消失
将注释代码打开后效果，如下：
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;}
/*.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;}
/*chrome自定义滚动条--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自定义滚动条--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">
<!-- tbody结构内容同上，复制即可 -->
</tbody>
</table>
</body>
</html>
效果如下：
滚动条样式修改只支持chrome，ie不支持，详细信息参考：