记录手写Html Table自带滚动

/*****************************html部分**********************************/

<table class="table2 table table-bordered tbodyScroll" style="min-200px">
<thead>
<tr>
<th>班级</th>
<th>科目</th>
</tr>
</thead>
<tbody>
<tr>
<td>1班</td>
<td>科学</td>
</tr>
</tbody>
</table>
 
/*****************************css部分**********************************/
.tbodyScroll {
height: 100%;
margin-bottom: 0;
}
.tbodyScroll tbody {
display: block;
height: calc(100% - 38px);
overflow-y: scroll;
overflow-x: hidden;
}
.tbodyScroll thead {
display: table;
calc(100% - 10px);
table-layout: fixed;
}
.tbodyScroll tr {
display: table;
calc(100% - 2px);
table-layout: fixed;
}
/* 表格 */
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table > thead > tr > th,
.table > tbody > tr > td {
vertical-align: middle;
font-size: 14px;
text-align: left;
border: 1px solid #E5E9F4;
color: #606266;
padding: 3px 2px;
}
.table > thead > tr> th{
background: #f4f7fc;
font-size: 15px;
font-weight: 550;
color: #606266;
height: 30px;
}
原文地址:https://www.cnblogs.com/pptt/p/11642163.html