一種相對自適應表格（relative responsive table）並且第一列凍結的方法
阿新 • • 發佈：2019-01-07
轉載：http://caibaojian.com/relative-responsive-table
需求分析
該樣式的主要需求分析是這樣子的：一個表格，有很多列內容，超出了螢幕的最大寬度，如果不做處理的情況下，瀏覽器會多出一個滾動條，所以我們需要改為沒有滾動條，同時可以查看錶格的內容。這個常常叫自適應。我之前也寫過一篇文章詳細的介紹了網路上大多數的自適應表格方法：響應式表格,HTML表格自適應（responsive table）
程式碼思路
首先左邊的第一列是資料的名稱，那麼滾動的時候這一列最好不隨著滾動條拉動而滾動，他會清晰的顯示了右邊是什麼內容。
所以我們分成兩部分：一部分是第一列的資料名稱，另一部分是資料列表。
左邊的資料採用固定寬度或者相對寬度，使用絕對定位浮動在一個地方。
右邊則使用正常流，距離左邊的寬度等於上面的，這樣子右邊的整體內容就是一個正常流，我們在裡面再巢狀一個div，那麼他就是100%的寬度，超出就會隱藏了。
實現程式碼
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>responsive table by caibaojian.com</title> </head> <body> <div class="table-two"> <div class="table-first"> <table> <thead> <tr> <th>統計項</th> </tr> </thead> <tbody> <tr> <td>所有使用者</td> </tr> <tr> <td>蘋果使用者</td> </tr> <tr> <td>安卓使用者</td> </tr> <tr> <td>親友賬戶</td> </tr> <tr> <td>記錄傳送</td> </tr> <tr> <td>二代繫結</td> </tr> <tr> <td>一代繫結</td> </tr> <tr> <td>二代上傳</td> </tr> <tr> <td>一代上傳</td> </tr> <tr> <td>上傳條數</td> </tr> <tr> <td>活躍使用者</td> </tr> </tbody> </table> </div> <div class=" table-second"> <div class="table-container"> <table> <thead> <tr> <th>今天數</th> <th>昨天數</th> <th>本週數</th> <th>上週數</th> <th>本月數</th> <th>上月數</th> <th>最近6個月</th> <th>總共</th> <th>上傳記錄最多的使用者</th> <th>此使用者共上傳資料</th> </tr> </thead> <tbody> <tr> <td align="center">10</td> <td align="center">2</td> <td align="center">15</td> <td align="center">54</td> <td align="center">141</td> <td align="center">210</td> <td align="center">738</td> <td align="center">12197</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">1</td> <td align="center">0</td> <td align="center">2</td> <td align="center">14</td> <td align="center">36</td> <td align="center">65</td> <td align="center">116</td> <td align="center">116</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">9</td> <td align="center">2</td> <td align="center">13</td> <td align="center">32</td> <td align="center">86</td> <td align="center">105</td> <td align="center">213</td> <td align="center">213</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">0</td> <td align="center">0</td> <td align="center">0</td> <td align="center">32</td> <td align="center">44</td> <td align="center">16</td> <td align="center">97</td> <td align="center">135</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">0</td> <td align="center">5</td> <td align="center">5</td> <td align="center">14</td> <td align="center">35</td> <td align="center">131</td> <td align="center">416</td> <td align="center">5857</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">2</td> <td align="center">3</td> <td align="center">6</td> <td align="center">16</td> <td align="center">32</td> <td align="center">11</td> <td align="center">47</td> <td align="center">47</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">2</td> <td align="center">0</td> <td align="center">2</td> <td align="center">13</td> <td align="center">30</td> <td align="center">15</td> <td align="center">150</td> <td align="center">200</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">6</td> <td align="center">10</td> <td align="center">14</td> <td align="center">48</td> <td align="center">82</td> <td align="center">84</td> <td align="center">141</td> <td align="center">141</td> <td align="center"></td> <td align="center">815</td> </tr> <tr> <td align="center">6</td> <td align="center">6</td> <td align="center">10</td> <td align="center">25</td> <td align="center">50</td> <td align="center">42</td> <td align="center">105</td> <td align="center">105</td> <td align="center">xiangyun_80</td> <td align="center">1740</td> </tr> <tr> <td align="center">1613</td> <td align="center">1563</td> <td align="center">4427</td> <td align="center">10735</td> <td align="center">35808</td> <td align="center">72077</td> <td align="center">144327</td> <td align="center">244153</td> <td align="center"></td> <td align="center"></td> </tr> <tr> <td align="center">1</td> <td align="center">1</td> <td align="center">2</td> <td align="center">7</td> <td align="center">20</td> <td align="center">24</td> <td align="center">64</td> <td align="center">64</td> <td align="center"></td> <td align="center"></td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
css
@charset "utf-8"; *{margin:0; padding:0; border:0;} table{border-collapse:collapse; border-spacing:0; border:0;width:100%;} table tr td, table tr th{border:1px solid #999; padding:.5em 1em; white-space:nowrap;} .table-first tr th, .table-first tr td{background:#F4F4F4; font-weight:bold;} .table-container table tr td, .table-container tr th{border:0; border-bottom:1px solid #999; border-right:1px solid #999; text-align:center;} .table-container table{border:1px solid #999; border-left:0;} .table-two{position:relative;} /*左邊內容是表頭名的寬度，根據實際情況而定,你也可以使用百分比*/ .table-first{position:absolute; left:0; top:0; width:102px;/*width:20%;*/} /*距離左邊表頭的內容寬度*/ .table-second{padding-left:102px;/*width:20%*/} /*超出部分出現滾動條*/ .table-container{width:100%; overflow-y:auto; _overflow:auto;margin: 0 0 10px;} /*IOS滾動條*/ .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); }
效果：
