table 固定列 纯css 上下滚动固定 顶部 th ，左右滚动固定 第一列 td
table 固定列
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css fix table header</title>
<style type="text/css">
.fixed-table {
width: 500px;
/* height: 200px; */
overflow-x: auto;
outline: 0;
}
.fixed-table table {
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.fixed-table th,
.fixed-table td {
border: 1px solid #ddd;
padding: 0.5rem 1rem;
}
.fixed-table thead th {
padding: 3px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: #fff;
}
.fixed-table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
.fixed-table tbody td:first-child {
font-weight: inherit;
text-align: left;
position: sticky;
left: 0;
z-index: 1;
}
.fixed-table td {
background: #fff;
padding: 4px 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="fixed-table">
<table>
<thead>
<tr>
<th>Teams</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>Runs</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milwaukee Brewers</td>
<td>阿萨德发撒旦法撒旦法撒旦法</td>
<td>0</td>
<td>4</td>
<td>1</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>3</td>
<td>4</td>
<td>17</td>
</tr>
<tr>
<td>Los Angles Dodgers</td>
<td>0</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>22</td>
</tr>
<tr>
<td>New York Mets</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>20</td>
</tr>
<tr>
<td>New York Mets</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>20</td>
</tr>
<tr>
<td>New York Mets</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>20</td>
</tr>
<tr>
<td>New York Mets</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>3</td>
<td>4</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)