純CSS,table的thead固定,tbody顯示滾動條

本文轉載自查看原文 2015-07-15 19:44 23326 css/ html/css/ table thead固定

以下代碼，僅在谷歌下測試過

首先是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如下，

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

分別加上min-width和max-width之后，這個問題解決了。但是還有一個問題，那就是給table加上寬度（寬度大於tbody的）之后，滾動條就會右移，如圖：

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 table表格，讓thead固定，tbody有滾動條，關鍵是都對齊的純css寫法。 Bootstrap表格中，thead固定，tbody有垂直滾動條 css——table: thead固定，tbody高度固定超出滾動純CSS實現table固定thead,tbody進行滾動.html thead 固定，tbody 超出滾動（附帶改變滾動條樣式） thead固定tbody滾動 table中的tbody高度超出部分，顯示滾動條並固定表頭 table下tbody滾動條與thead對齊的方法且每一列可以不均等 CSS 設置table下tbody滾動條 CSS 設置table下tbody滾動條