純CSS實現table固定thead,tbody進行滾動.html
阿新 • • 發佈:2020-10-12
emmm。公司業務需求。所以自己寫了一個表格固定,不過,網上也看到了另一種方法。都放出來。學習使用。
效果一:
程式碼一
<!-- * @Descripttion: * @version: * @Author: yang_ft * @Date: 2020-09-29 13:59:26 * @github: famensaodiseng * @LastEditTime: 2020-10-10 17:13:17 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>純css固定表格頭部滾動內容</title> <style> .box { width: 1000px; height: 100%; margin: 100px auto; background-color: skyblue; padding: 20px; } table { border-collapse: collapse; background-color: rgba(20, 18, 65, 0.6); text-align: center; border: 1px solid #000; color: #fff; } caption { color: rgb(10, 10, 10); } th { width: 200px; height: 50px; background-color: rgb(39, 55, 153); } td { height: 50px; } tr:nth-child(even) { background: rgba(3, 96, 255, 0.25); } tr:hover { background: #aedaff; } table thead { display: block; width: 100%; background: #ddd; } table tbody { display: block; height: 300px; overflow: auto; } table td, table th { width: 200px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } table tr { border-bottom: 1px solid #B74; } /* 滾動條樣式 content_l 也可以不自定義*/ tbody::-webkit-scrollbar { /*滾動條整體樣式*/ width: 2px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 1px; } tbody::-webkit-scrollbar-thumb { /*滾動條裡面小方塊*/ border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ffffff; } tbody::-webkit-scrollbar-track { /*滾動條裡面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: rgba(3, 96, 255, 0.25); } </style> </head> <body> <div class="box"> <table border="1"> <caption> <h3>CSS固定表格頭部</h3> </caption> <thead> <tr> <th>測試</th> <th>測試</th> <th>測試</th> <th>測試</th> <th>測試</th> </tr> </thead> <tbody> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> </tbody> </table> </div> </body> </html>
效果二
程式碼二
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>table表格,thead固定,tbody滾動條</title> <style> table { border-collapse: collapse; } table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 99.99%; /* 如果此處寫100%會出現橫向滾動條 */ table-layout: fixed } table thead { width: calc(100% - 1em) } table thead th { background: #ccc; } </style> </head> <body> <table width="80%" border="1"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>出生年月</th> <th>手機號碼</th> <th>單位</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>張三封</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴與四十大盜</td> </tr> <tr> <td>張小三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>騰訊科技</td> </tr> <tr> <td>張三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>瀏陽河就業</td> </tr> <tr> <td>張三瘋子</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>張三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>張大三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>張三五</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>張劉三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> <tr> <td>張三</td> <td>18</td> <td>1990-9-9</td> <td>13682299090</td> <td>阿里巴巴</td> </tr> </tbody> </table> </body> </html>
附帶一個常用的表格功能。table設定不同列寬
效果
程式碼
<!-- * @Descripttion: * @version: * @Author: yang_ft * @Date: 2020-09-29 13:59:26 * @github: famensaodiseng * @LastEditTime: 2020-10-10 17:31:14 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>頁面模版</title> <style> .box { width: 1000px; height: 100%; margin: 100px auto; background-color: skyblue; padding: 20px; } table { width: 100%; border-collapse: collapse; word-wrap: break-word; background-color: rgba(20, 18, 65, 0.6); text-align: center; border: 1px solid #000; color: #fff; } caption { color: rgb(10, 10, 10); } th { width: 200px; height: 50px; background-color: rgb(39, 55, 153); } td { height: 50px; word-wrap: break-word; } tr:nth-child(even) { background: rgba(3, 96, 255, 0.25); } tr:hover { background: #aedaff; } table thead { display: block; width: 100%; background: #ddd; } table tbody { width: 100.2%; display: block; height: 300px; overflow: auto; } table td, table th { width: 200px; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } table tr { border-bottom: 1px solid #B74; } /* 滾動條樣式 content_l 也可以不自定義*/ tbody::-webkit-scrollbar { /*滾動條整體樣式*/ width: 2px; /*高寬分別對應橫豎滾動條的尺寸*/ height: 1px; } tbody::-webkit-scrollbar-thumb { /*滾動條裡面小方塊*/ border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ffffff; } tbody::-webkit-scrollbar-track { /*滾動條裡面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background: rgba(3, 96, 255, 0.25); } </style> </head> <body> <div class="box"> <table border="1" style="word-wrap:break-word;"> <caption> <h3>CSS固定表格頭部</h3> </caption> <thead> <tr> <th style="width:34%;">測試</th> <th>測試</th> <th>測試</th> <th>測試</th> <th>測試</th> </tr> </thead> <tbody> <tr> <td style="width:34%;">11111</td> <td>22222</td> <td>33333</td> <td>4444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> <tr> <td>11111</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> </tr> </tbody> </table> </div> </body> </html>