纯CSS,table的thead固定,tbody显示滚动条

时间:2023-01-26 22:53:07

以下代码,仅在谷歌下测试过

首先是html的table的代码:

 1   <table class="tablediv" id="myTable" border="1"> 
 2         <thead>
 3           <tr>
 4             <td class="wt40">111asdasdassd</td>
 5             <td class="wt50">222asdsa</td>
 6           </tr> 
 7         </thead>
 8         <tbody id="tb">
 9           <tr>
10             <td class="wt40">aaaaaaa23423d</td>
11             <td class="wt50">bbbbb23w23sd</td>
12           </tr>
13           <tr>
14             <td class="wt40">fdfffffffffffffsgdds</td>
15             <td class="wt50">bbbbbbb sd</td>
16           </tr>
17           <tr>
18             <td class="wt40">aaaaaaa sd</td>
19             <td class="wt50">bbbbbbb sd</td>
20           </tr>
21           <tr>
22             <td class="wt40">aaaaaaa sd</td>
23             <td class="wt50">bbbbbbb sd</td>
24           </tr> 
25           <tr>
26             <td class="wt40">aaaaaaa sd</td>
27             <td class="wt50">bbbbbbb sd</td>
28           </tr> 
29           <tr>
30             <td class="wt40">aaaaaaa sd</td>
31             <td class="wt50">bbbbbbb sd</td>
32           </tr> 
33           <tr>
34             <td class="wt40">aaaaaaa sd</td>
35             <td class="wt50">bbbbbbb sd</td>
36           </tr> 
37           <tr>
38             <td class="wt40">aaaaaaa sd</td>
39             <td class="wt50">bbbbbbb sd</td>
40           </tr> 
41           <tr>
42             <td class="wt40">aaaaaaa sd</td>
43             <td class="wt50">bbbbbbb sd</td>
44           </tr> 
45           <tr>
46             <td class="wt40">aaaaaaa sd</td>
47             <td class="wt50">bbbbbbb sd</td>
48           </tr> 
49           <tr>
50             <td class="wt40">aaaaaaa sd</td>
51             <td class="wt50">bbbbbbb sd</td>
52           </tr> 
53         </tbody>
54       </table>

下面是css代码,

 1   table {
 2           margin:0 auto; 
 3           border-collapse:collapse;
 5       }
 6       thead {
 7           background:#CCCCCC;
 8           display:block
 9       }
10       tbody {
11           height:100px;
12           overflow-y:scroll;
13           display:block
14       }
15       .wt40{
16           width:300px;
19       }
20       .wt50{
21           width:450px;
24       } 

浏览器窗口比table宽的时候显示的是正常的,但是浏览器的宽度缩小的时候会出现thead和tbody对不齐的情况,如下图

纯CSS,table的thead固定,tbody显示滚动条

之后,修改css如下,

 .wt40{
          width:300px;
          min-width:300px;
          max-width:300px;
      }
      .wt50{
          width:450px;
          min-width:450px;
          max-width:450px;
      } 

分别加上min-width和max-width之后,这个问题解决了。但是还有一个问题,那就是给table加上宽度(宽度大于tbody的)之后,滚动条就会右移,如图:

纯CSS,table的thead固定,tbody显示滚动条

所以只要把table的width设置的比tbody就好了。

纯CSS,table的thead固定,tbody显示滚动条