固定行表头，固定列的html

最新推荐文章于 2023-08-21 15:45:11 发布

tyouvivi

最新推荐文章于 2023-08-21 15:45:11 发布

阅读量3.3k

点赞数

分类专栏：其他文章标签： javascript class input border div stylesheet

本文链接：https://blog.csdn.net/tyouvivi/article/details/2086841

版权

其他专栏收录该内容

15 篇文章 0 订阅

订阅专栏

固定行表头，固定列的html

CSS文件

.result {

}

.result .records td,.result .records th {

padding: 3px;

border: 1px solid silver;

}

.result .records {

position: relative;

overflow: auto;

text-align: center;

padding: 0px;

height: 100%;

width: 800px;

}

.result .records table {

border: 0px;

}

.records table thead tr {

background-color: silver;

}

.records table thead tr th {

margin: 0px;

text-align: center;

background-color: #FFae89;

}

.records table tbody tr th {

background-color: #efefef;

font-weight: normal;

}

.result .scroll-y table thead tr {

z-index: 10;

position: relative;

top: expression(this.offsetParent.scrollTop);

}

.scroll-x table .fixed {

z-index: 1;

left: expression(document.getElementById("lists").scrollLeft );

position: relative;

}

.scroll-x table tbody tr th {

z-index: 2;

left: expression(this.offsetParent.scrollLeft );

position: relative;

}

HTML

< html >

< HEAD >

< title > 　VANMASTER　 - 登録保留商品マスタメンテナンス </ title >

< link rel ="stylesheet" href ="./css/gridstyle.css" type ="text/css" >

</ HEAD >

< BODY class ="body_main" >

< div style ="height: 10px" ></ div >

< CENTER >

< div style ="BORDER: green 0px solid; OVERFLOW-Y: auto; WIDTH:800px;" align ="center" >

< table width ="800" border ="0" >< tr align ='right' >

< td width ="100" ></ td >

< td align ="center" style ="font-size:14px" >< b > 検索結果一覧 </ b ></ td >

< td width ="100" style ="font-size:12px" align ="right" >< b > ( 57 件) </ b ></ td >

</ tr >

</ table >

</ div >

< div class ="panel result" >

< div class ="records" style ="Height: 277px; OVERFLOW-Y: auto;" >

< div class ="records scroll-x scroll-y" id ="lists" style ="BORDER: green 1px silver; " >

< TABLE class ="tblA" style ="MARGIN-LEFT: 0%; HEIGHT: 30px" cellSpacing ="0" cellPadding ="0" align ="left" border ="1" >

< thead >

< tr style ="font-size:12px" >

< th align ="center" width ="40" nowrap ="nowrap" class ="fixed" > No. </ th >

< th align ="center" width ="30" nowrap ="nowrap" class ="fixed" > 削 < br > 除 </ th >

< th align ="center" width ="30" nowrap ="nowrap" class ="fixed" > 更 < br > 新 </ th >

< th align ="center" width ="100" nowrap ="nowrap" class ="fixed" > JANｺｰﾄﾞ </ th >

< th align ="center" width ="280" nowrap ="nowrap" > 商品名 </ th >

< th align ="center" width ="35" nowrap ="nowrap" > ｽﾃｰﾀｽ </ th >

< th align ="center" width ="35" nowrap ="nowrap" > ﾒﾝﾃﾅﾝｽ </ th >

< th align ="center" width ="70" nowrap ="nowrap" > ﾒｰｶｰ </ th >

< th align ="center" width ="50" nowrap ="nowrap" > ﾌﾞﾗﾝﾄﾞ </ th >

< th align ="center" width ="50" nowrap ="nowrap" > 種級 </ th >

< th align ="center" width ="50" nowrap ="nowrap" > ｶﾃｺﾞﾘ < br > ｸﾞﾙｰﾌﾟ </ th >

< th align ="center" width ="50" nowrap ="nowrap" > ｶﾃｺﾞﾘ </ th >

< th align ="center" width ="40" nowrap ="nowrap" > 種類 </ th >

< th align ="center" width ="40" nowrap ="nowrap" > 味覚 </ th >

< th align ="center" width ="100" nowrap ="nowrap" > 容量 </ th >

< th align ="center" width ="100" nowrap ="nowrap" > 幅 </ th >

< th align ="center" width ="100" nowrap ="nowrap" > 高さ </ th >

< th align ="center" width ="100" nowrap ="nowrap" > 奥行 </ th >

< th align ="center" width ="40" nowrap ="nowrap" > 包装形態 </ th >

< th align ="center" width ="40" nowrap ="nowrap" > 容器種別 </ th >

< th align ="center" width ="40" nowrap ="nowrap" > 産地 </ th >

< th align ="center" width ="80" nowrap ="nowrap" > 発売日 </ th >

< th align ="center" width ="40" nowrap ="nowrap" > 定番 </ th >

< th align ="center" width ="40" nowrap ="nowrap" > ALC度数 </ th >

< th align ="center" width ="100" nowrap ="nowrap" > ﾊﾞﾗ入り数 </ th >

< th align ="center" width ="100" nowrap ="nowrap" > ｹｰｽ入り数 </ th >

< th align ="center" width ="80" nowrap ="nowrap" > 登録日 </ th >

< th align ="center" width ="70" nowrap ="nowrap" > 登録者ID </ th >

< th align ="center" width ="80" nowrap ="nowrap" > 更新日 </ th >

< th align ="center" width ="70" nowrap ="nowrap" > 更新者ID </ th >

</ tr >

</ thead >

< tbody >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 1   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0000047478619' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0000047478619','1');" > 0000047478619 </ A ></ th >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/07 </ td >

< td align ="left" >   1111111 </ td >

< td align ="left" >   2008/02/07 </ td >

< td align ="left" >   1111111 </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 2   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001000009178' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001000009178','2');" > 0001000009178 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 3   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001000009338' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001000009338','3');" > 0001000009338 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 4   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001000009628' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001000009628','4');" > 0001000009628 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 5   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001000009758' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001000009758','5');" > 0001000009758 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 6   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001100009238' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001100009238','6');" > 0001100009238 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 7   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001100009528' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001100009528','7');" > 0001100009528 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 8   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001100009658' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001100009658','8');" > 0001100009658 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 9   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001200009138' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001200009138','9');" > 0001200009138 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 10   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001200009268' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001200009268','10');" > 0001200009268 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 11   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001200009558' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001200009558','11');" > 0001200009558 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 12   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001200009589' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001200009589','12');" > 0001200009589 </ A ></ th >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/07 </ td >

< td align ="left" >   1111111 </ td >

< td align ="left" >   2008/02/07 </ td >

< td align ="left" >   1111111 </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 13   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001200009718' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001200009718','13');" > 0001200009718 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 14   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001900000169' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001900000169','14');" > 0001900000169 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

< tr class ="trListCommon" style ="font-size:12px; " >

< th align ="right" > 15   </ th >

< th align ="center" >< INPUT type ="checkbox" name ="deleteNo" value ='0001900000329' > </ th >

< th align ="center" >   </ th >

< th align ="center" >< A href ="#" onclick ="javascript:linkClick('0001900000329','15');" > 0001900000329 </ A ></ th >

< td align ="left" >   </ td >

< td align ="left" >   0 </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   </ td >

< td align ="right" > 0   </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

< td align ="left" >   2008/02/05 </ td >

< td align ="left" >   UNMATCH </ td >

</ tr >

</ tbody >

</ TABLE >

</ div >

</ DIV >

</ CENTER >

</ body >

</ html >

画面显示

tyouvivi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定行表头，固定列的html

固定行表头，固定列的htmlCSS文件.result {...}{}.result .records td,.result .records th {...}{ padding: 3px; border: 1px solid silver;}.result .records {...}{ position: relative; overflow: auto;
复制链接

扫一扫

专栏目录