table固定表頭滾動

2022-07-16 05:27:10 字數 2286 閱讀 7652

一、table固定表頭滾動(不相容ie)  使用scrolltop監聽滾動   如下例

1、html

<

div

class

="tabflow"

id="flowtable-cont"

>

<

table

>

<

thead

><

tr><

th>年度

th><

th>起降架次(萬架)

th><

th>旅客吞吐(萬人)

th><

th>貨郵吞吐(萬噸)

th>

tr>

thead

>

<

tbody

>

<

tr><

td>2011

td><

td>512

td><

td>600

td><

td>376

td>

tr>

<

tr><

td>2012

td><

td>504

td><

td>593

td><

td>397

td>

tr>

<

tr><

td>2013

td><

td>562

td><

td>562

td><

td>381

td>

tr>

<

tr><

td>2014

td><

td>705

td><

td>464

td><

td>302

td>

tr>

<

tr><

td>2015

td><

td>784

td><

td>443

td><

td>374

td>

tr>

<

tr><

td>2016

td><

td>645

td><

td>504

td><

td>415

td>

tr>

<

tr><

td>2017

td><

td>534

td><

td>534

td><

td>432

td>

tr>

<

tr><

td>2018

td><

td>375

td><

td>582

td><

td>460

td>

tr>

<

tr><

td>2019

td><

td>397

td><

td>621

td><

td>442

td>

tr>

tbody

>

table

>

div>

2、css

.tabflow.tabflow table.tabflow table tr.tabflow table thead.tabflow table tbody tr:nth-child(2n+1).tabflow table tbody tr td
3、js

window.onload = function

() tableflow.addeventlistener('scroll',scrollhandle); //監聽scroll事件

}

二、table固定表頭滾動(相容ie) 更改css, 設定固定寬度  

css  

tabletabletable trtable theadtable thead tr thtable thead tr th:first-childtable tbodytable tbody tr:nth-child(2n+1)table tbody tr tdtable tbody tr td:first-child
效果

Table實現表頭固定 內容滾動

序號內容 1我只是用來測試的 2我只是用來測試的 3我只是用來測試的 4我只是用來測試的 table head table body table head table,table body table table body table tr nth child 2n 1 其實關鍵之處在於 1 使用了...

table固定表頭

html中table樣式固定表頭,下面的內容滾動 html 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn號 會員名稱 會員 繫結狀態 啟用狀態 入庫時間 終端sn...

table中head表頭固定,body滾動

序號內容 1我只是用來測試的 2我只是用來測試的 3我只是用來測試的 4我只是用來測試的 5我只是用來測試的 6我只是用來測試的 7我只是用來測試的 8我只是用來測試的 9我只是用來測試的 10我只是用來測試的 11我只是用來測試的 12我只是用來測試的 13我只是用來測試的 14我只是用來測試的 ...