css+js實現表格表頭固定,內容(tbody)滾動的一個另類方法


<!--已測試,可使用-->

 

<!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>


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM