table固定表頭和首列

2021-08-14 06:34:35 字數 2997 閱讀 2130

html部分,結構上分為左右兩部分,又分別拆開為上下兩部分,總共四個結構部分,以下為固定首行和首列,需要固定多行多列的可以自行新增,如下列表中姓名為左上角固定不變的位置,可自行新增多個。

class="container">

id="left_div">

******

id="left_div1">

id="left_table1"

class="table table-bordered">

姓名th>

tr>

table>

div>

******

id="left_div2">

id="left_table2"

class="table table-bordered">

table>

div>

div>

id="right_div">

******

id="right_div1">

id="right_divx">

id="right_table1"

class="table-bordered">

員工狀態th>

部門th>

應出勤天數th>

實際出勤天數th>

遲到次數th>

遲到時長th>

早退次數th>

早退時長th>

漏打卡次數th>

外勤次數th>

曠工天數th>

class="jiaban-th">

加班-按加班規則計算p>

工作日加班span>

休息日加班span>

節假日加班span>

p>

th>

本月共請假時間(天)th>

使用年假(天)th>

使用調休(天)th>

tr>

table>

div>

div>

******

id="right_div2">

id="right_table2"

class="table table-bordered">

table>

div>

div>

div>css部分,根據需要自行修改

/*報**式*/

.staff-list-sheet

#left_div

#left_div1

#left_div2

#left_table2

#left_table1

th#left_table2

th#right_divx

#right_div

#right_div1

#right_div2

#right_table1

#right_table1

th#right_table1

th.jiaban-th

#right_table1

th.jiaban-th

p#right_table1

th.jiaban-th

p:nth-of-type(2)

#right_table1

th.jiaban-th

p,#right_table1

th.jiaban-th

pspan

#right_table1

th.jiaban-th

pspan

:nth-of-type(2)

#right_table1

th.jiaban-th

pspan

#right_table2

#right_table1

th#right_table2

td.table-bordered>thead>tr>th,

.table-bordered>tbody>tr>th,

.table-bordered>tfoot>tr>th

.table-bordered>thead>tr>td,

.table-bordered>tbody>tr>td,

.table-bordered>tfoot>tr>td

.table-bordered

#right_table2

.status

span

#right_table2

.zhengshi

span

#right_table2

.shiyong

span

#right_table2

.dairuzhi

span

js部分

//固定和滾動

var right_div2 = document.getelementbyid("right_div2");

right_div2.onscroll = function

() //設定右邊div寬度

document.getelementbyid("right_div").style.width = "" + 1200 - 150 + "px";

setinterval(function

() , 0);

for(var i = 0; i < 24; i++)

//動態計算滾動區域寬度

var th_list = $("#right_table1 th");

var _width = 0;

for(var i = 0; i < th_list.length; i++)

_width = _width + th_list.length;

$("#right_div1").width(_width);

$("#right_div2").width(_width);

最終這樣:

table 固定首列

首先,table外層套兩層div,outerdiv和 innerdiv 名稱 性別班級 語文數學 合計 張三男 28090170 李四男2 8090 170 outerdiv和innerdiv的樣式設定如下 outerdiv innerdiv設定table的樣式 注 第一列position設為abs...

GridView固定表頭和首列

當gridview中要顯示的資料非常多的時候,使用者常需要開發人員固定表頭或是首列,以保證在拖動滾動條的時候,可以清楚得了解到每一列或行的內容。借助於css的功能,可以將gridview打造成這樣的 首先,要把gridview放在乙個容器中,然後在頁面中新增如下css fixedheader fix...

table固定表頭

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