CSS實現表格表頭（thead）固定，內容（tbody）滾動
阿新 • • 發佈：2019-01-02
前言
最近在寫一個專案，然後要實現表頭固定，tbody內容滾動的效果，該專案中沒有使用任何外掛，並且表格列數蠻多的，剛開始實現起來遇到各種問題，感覺蠻複雜的，後來找到了一種利用transform的方法實現，效果還不錯，請看程式碼~~~~~~
————程式碼————
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" /> <style> .table{ width:100%; max-width: 100%; } .table>thead>tr{ background: #edf7ff; } .table>thead>tr>th { white-space: nowrap; padding: 8px; line-height: 1.42857143; } .table>tbody>tr:nth-child(odd){ background: #fff; } .table>tbody>tr:nth-child(even){ background: #f7f7f7; } .table>tbody>tr:hover{ background: #e3ecfc; } .table-cont{ /**make table can scroll**/ max-height: 500px; overflow: auto; /** add some style**/ /*padding: 2px;*/ background: #ddd; margin: 20px 10px; border: 1px solid #ddd; } </style> </head> <body> <div class='table-cont' id='table-cont'><!--看這裡--> <table class="table table-striped"> <thead> <tr> <th>委託編號</th> <th>交易日</th> <th>賬戶編號</th> <th>賬戶名稱</th> <th>組合編號</th> <th>組合名稱</th> <th>自定義訂單編號</th> <th>證券程式碼</th> <th>證券名稱</th> <th>交易所</th> <th>價格型別</th> <th>委託價格</th> <th>委託數量</th> <th>委託金額</th> <th>買賣方向</th> <th>訂單狀態</th> <th>組合開平標誌</th> <th>組合投機套保標誌</th> <th>備兌標誌</th> <th>報單型別</th> <th>今成交數量</th> <th>今成交金額</th> <th>撤成\廢單數量</th> <th>剩餘數量</th> <th>訂單總費用</th> <th>報單日期</th> <th>委託時間</th> <th>最後修改時間</th> <th>撤銷時間</th> <th>撤單編號</th> <th>操作員編號</th> <th>操作員名稱</th> <th>櫃檯委託編號</th> <th>訂單IP</th> <th>訂單MAC</th> <th>訂單硬碟序列號</th> <th>訂單機器碼</th> <th>訂單作業系統</th> <th>會話編號</th> <th>前置編號</th> <th>交易編碼</th> <th>席位號</th> <th>營業部程式碼</th> <th>有效期型別</th> <th>成交量型別</th> <th>最小成交量</th> <th>觸發條件</th> <th>止損價</th> <th>OR委託編號</th> <th>狀態資訊</th> <th>發起標誌</th> <th>預留欄位1</th> <th>預留欄位2</th> <th>撤單標誌</th> <th>備註</th> </tr> </thead> <tbody> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> <tr> <td>委託編號</td> <td>交易日</td> <td>賬戶編號</td> <td>賬戶名稱</td> <td>組合編號</td> <td>組合名稱</td> <td>自定義訂單編號</td> <td>證券程式碼</td> <td>證券名稱</td> <td>交易所</td> <td>價格型別</td> <td>委託價格</td> <td>委託數量</td> <td>委託金額</td> <td>買賣方向</td> <td>訂單狀態</td> <td>組合開平標誌</td> <td>組合投機套保標誌</td> <td>備兌標誌</td> <td>報單型別</td> <td>今成交數量</td> <td>今成交金額</td> <td>撤成\廢單數量</td> <td>剩餘數量</td> <td>訂單總費用</td> <td>報單日期</td> <td>委託時間</td> <td>最後修改時間</td> <td>撤銷時間</td> <td>撤單編號</td> <td>操作員編號</td> <td>操作員名稱</td> <td>櫃檯委託編號</td> <td>訂單IP</td> <td>訂單MAC</td> <td>訂單硬碟序列號</td> <td>訂單機器碼</td> <td>訂單作業系統</td> <td>會話編號</td> <td>前置編號</td> <td>交易編碼</td> <td>席位號</td> <td>營業部程式碼</td> <td>有效期型別</td> <td>成交量型別</td> <td>最小成交量</td> <td>觸發條件</td> <td>止損價</td> <td>OR委託編號</td> <td>狀態資訊</td> <td>發起標誌</td> <td>預留欄位1</td> <td>預留欄位2</td> <td>撤單標誌</td> <td>備註</td> </tr> </tbody> </table> </div> <script> window.onload = function(){ var tableCont = document.querySelector('#table-cont'); function scrollHandle (e){ console.log(this); var scrollTop = this.scrollTop; this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)'; } tableCont.addEventListener('scroll',scrollHandle); } </script> </body> </html>
————效果如下圖————
