使用css固定table表头

发表于 | 分类于

#前言 最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧 #代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
    <html lang="zh-CN" class=""><head>
    
        <meta charset="UTF-8">
        <title>CodePen Demo</title>
    
        <style>
      .table-container {
        width: 50%;
        height: 200px;
        border: solid 1px #cccccc;
        margin: 10px auto;
        background: #FFF;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
        padding-top: 50px;
        overflow: hidden;
      }
    
      .table-container-inner {
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
      }
    
      .table-header-fixed {
        width: 100%;
        background: #FFF;
        overflow-x: hidden;
        overflow-y: auto;
      }
    
      th, td, span {
        text-align: left;
      }
    
      th span {
        position: absolute;
        top: 0;
        width: 100%;
        display: block;
        line-height: 50px;
        border-left: solid 1px #3a84ac;
        border-bottom: solid 1px #cccccc;
        padding-left: 5px;
        margin-left: -5px;
        font-weight: 400;
        letter-spacing: 1px;
        color: #FFF;
        background: #549DC5;
      }
    
        </style>
    
      </head>
    
      <body>
        <div class="container" role="main">
        <center>
          <h1>CSS - Fixed Header With Variable Width Table</h1>
        </center>
        <div class="table-container">
          <div class="table-container-inner">
            <table class="table-header-fixed">
              <thead>
                <tr>
                  <th>
                    <span>First</span>
                  </th>
                  <th>
                    <span>Second</span>
                  </th>
                  <th>
                    <span>Third</span>
                  </th>
                  <th>
                    <span>Forth</span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second222222222222222222222222222</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
                <tr>
                  <td  data-col="first">First</td>
                  <td  data-col="second">Second</td>
                  <td  data-col="third">Third</td>
                  <td  data-col="third">Forth</td>
                </tr>
              </tbody>
            </table>
          </div><!-- /fixed-table-container-inner -->
        </div><!-- /fixed-table-container -->
      </div><!-- /container -->
    
      </html>
坚持原创技术分享，您的支持将鼓励我继续创作！