Skip to content

Commit 4647eff

Browse files
maliangcodermaliangcoder
committed
css实现表格首列冻结
1 parent e15baf5 commit 4647eff

File tree

1 file changed

+72
-0
lines changed

1 file changed

+72
-0
lines changed

‎常用的CSS主流布局案例(1~8)/43_表格首列冻结.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>表格首列冻结</title>
6+
<style>
7+
.container {
8+
position: relative;
9+
width: 400px;
10+
}
11+
.scroll {
12+
overflow-x: scroll;
13+
}
14+
.container table {
15+
border-collapse: collapse;
16+
}
17+
.container table tr th {
18+
min-width: 100px;
19+
}
20+
.container table tr td,
21+
table tr th {
22+
border: 1px solid #333;
23+
text-align: center;
24+
font-weight: 400;
25+
}
26+
table.header {
27+
position: absolute;
28+
left: 0;
29+
top: 0;
30+
}
31+
table.header tr td,
32+
table.header tr th {
33+
background-color: #ddd;
34+
font-weight: bold;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<div class="container">
40+
<div class="scroll">
41+
<table>
42+
<thead>
43+
<tr>
44+
<th class="header">分类</th>
45+
<th>2</th>
46+
<th>3</th>
47+
<th>4</th>
48+
<th>5</th>
49+
</tr>
50+
<tr>
51+
<td>排行</td>
52+
<td>2</td>
53+
<td>3</td>
54+
<td>4</td>
55+
<td>5</td>
56+
</tr>
57+
</thead>
58+
</table>
59+
</div>
60+
<table class="header">
61+
<thead>
62+
<tr>
63+
<th class="">分类</th>
64+
</tr>
65+
<tr>
66+
<th class="">排行</th>
67+
</tr>
68+
</thead>
69+
</table>
70+
</div>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)