css實現table鎖定表頭

2021-07-03 19:12:03 字數 2001 閱讀 6285

在做專案中,碰到**資料全部載入,不要分頁,就需要鎖定表頭的業務。自己也上網搜了一些資料,

1.css+html實現

一般的思路就是兩個table拼接,不過問題是上下表單可能對不齊

2.js實現

一般的思路是重新建立表頭,表頭浮動

在這裡css+html實現:

css+html實現固定表頭title>

type="text/css">

#scrolltable

#scrolltable

table

/*表頭 div的第乙個子元素**/

#scrolltable

table

.thead

/*表頭*/

#scrolltable

table

.thead

th /*能帶滾動條的錶身*/

/*div的第二個子元素*/

#scrolltable

div /*能帶滾動條的錶身的正體*/

#scrolltable

table

.tbody

/*能帶滾動條的錶身的格仔*/

#scrolltable

table

.tbody

tdstyle>

head>

id="scrolltable">

class="thead">

width="170px">

col>

width="170px">

col>

width="170px">

col>

col>

名稱th>

語法th>

說明th>

例子th>

tr>

tbody>

table>

class="tbody">

width="170px">

col>

width="170px">

col>

width="170px">

col>

col>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

1td>

1td>

1td>

1td>

tr>

tbody>

table>

div>

div>

body>

html>

css 實現 table斜線表頭

border left border right border top border bottom 能實現特殊形狀 資費標準 title style type text css table th,td th 模擬對角線 out b em assessdetail td style head body...

jquery實現表頭鎖定

前段時間做專案時候由於需要顯示乙個列表,但是由於資料太多在滾動的時候表頭必須凍結住,所以就寫了下面這個指令碼 曾經在網上也找過相應的指令碼,但是不怎麼理想所以就自己寫了,但是目前由於專案僅僅用到了表頭的凍結,而不需要指定列凍結所以目前只能算個不完整的指令碼,不過一般的僅僅需要表頭凍結就可以使用了 現...

table固定表頭

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