- 序号列与课程名称列为固定列,thead行为固定行
- position:stickey 会与表格的 border collapse样式冲突,所以使用 box-shadow样式来做表格的边框样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
z-index: auto !important;
height: 100vh;
color: #222;
overflow-anchor: none;
margin: 0;
padding: 0;
}
.sticky-box {
overflow: auto;
max-height: 100%;
max-width: 100%;
}
.sticky-box .info-table {
border-collapse: collapse;
}
.sticky-box .info-table thead tr th,
.sticky-box .info-table tbody tr td {
box-shadow: inset -1px -1px 0 0 #ebeef5;
font-size: 12px;
padding: 6px;
white-space: nowrap;
text-align: center;
position: relative;
}
.sticky-box .info-table thead tr th,
.sticky-box .info-table tbody tr:nth-child(even) td {
background-color: #fafafa;
}
.sticky-box .info-table tbody tr:nth-child(odd) td {
background-color: #fff;
}
.sticky-box .info-table thead {
position: sticky;
top: 0;
background-color: #fafafa;
z-index: 3;
}
.sticky-box .info-table thead tr:nth-child(1) th:nth-child(1),
.sticky-box .info-table tbody tr td:nth-child(1) {
width: 36px;
}
.sticky-box .info-table thead tr:nth-child(1) th:nth-child(1),
.sticky-box .info-table thead tr:nth-child(1) th:nth-child(2),
.sticky-box .info-table tbody tr td:nth-child(1),
.sticky-box .info-table tbody tr td:nth-child(2) {
position: sticky;
left: 0;
z-index: 2;
}
.sticky-box .info-table thead tr:nth-child(1) th:nth-child(2),
.sticky-box .info-table tbody tr td:nth-child(2) {
left: 36px;
}
.sticky-box .info-table tbody tr td label {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sticky-box .info-table tbody tr td input,
.sticky-box .info-table tbody tr td input+span {
display: none;
}
.sticky-box .info-table tbody tr td input:checked+span {
display: block;
padding-top: 6px;
}
</style>
</head>
<body>
<div class="sticky-box">
<table class="info-table">
<thead>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">课程名称</th>
<th colspan="2">GR1</th>
<th colspan="2">GR2</th>
<th colspan="2">GR3</th>
<th colspan="2">GR4</th>
<th colspan="2">GR5</th>
<th colspan="2">GR6</th>
<th colspan="2">GR7</th>
<th colspan="2">GR8</th>
<th colspan="2">GR9</th>
<th colspan="2">GR10</th>
<th rowspan="2">GR11</th>
</tr>
<tr>
<th>GR1-1</th>
<th>GR1-2</th>
<th>GR2-1</th>
<th>GR2-2</th>
<th>GR3-1</th>
<th>GR3-2</th>
<th>GR4-1</th>
<th>GR4-2</th>
<th>GR5-1</th>
<th>GR5-2</th>
<th>GR6-1</th>
<th>GR6-2</th>
<th>GR7-1</th>
<th>GR7-2</th>
<th>GR8-1</th>
<th>GR8-2</th>
<th>GR9-1</th>
<th>GR9-2</th>
<th>GR10-1</th>
<th>GR10-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>计算机基计算机基计算机基计算机基础(1)</td>
<td>
<label>
<input type="checkbox" name="origin" checked />
<span>√</span>
</label>
</td>
<td>
<select>
<option value="">不设置</option>
<option value="H">H</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
</td>
<td>
<select style="display: none;">
<option value="">不设置</option>
<option value="H">H</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
<span>M</span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>
形式与正常
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>
计算机基础(3)
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>计算机基础(4)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>计算机基础(2)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>