固定行表头，固定列的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 >

画面显示

固定行表头，固定列的html相关推荐

在Excel中固定行标题和列标题
在Excel中固定行标题和列标题,也就是让第一列或者第一行在滚屏的时候保持不动,方法很简单,如下: 如果想固定第一行,则选定第二行,然后在菜单栏选择,窗口,冻结窗格如果想固定第一列,则选定第二列,然 ...
html表头固定原理,表头固定(利用jquery实现原理介绍)
表头固定应该是一个用得比较多的功能,参考了网上几个例子,在几个常用浏览器下显示不是很完美.而且很多都是基于固定的表格,在编码时多写一个固定的表头,对于动态生成的不知道多少列的表格就无从下手.而且例子中 ...
UiPath设置Excel表格自适应行高、自适应列宽或固定行高、列宽
话不多说,上图,添加第三方包:BalaReva.Excel.Activities, 使用AutoFit Columns 设置列宽,设置属性(若需要固定值设置对应参数即可) 自动调整列宽.自动调整行高
移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹
此方法在安卓6的自带下拉刷新的APP内无效. 做移动app项目时,用的是app内嵌webview的方法,遇到问题. 在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突. 开始考虑通过在touchm ...
固定表格第一行(表头固定)，其他行可以上下滚动
本文来源:http://bbs.okajax.com/thread-2482-1-1.html 固定表格第一行,其他行可以上下滚动固定表格第一行,其他行可以上下滚动表格.在开发中非常有用.比如 ...
php文章表格固定行,怎么固定单元格第一行
固定单元格第一行的方法:首先打开Excel表格,并在第一行输入需要固定置顶的内容:然后选中excel表格第一行需要置顶的内容:接着在"开始"的功能界面中靠右边找到"冻结窗 ...
el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
表格-固定列固定行
当一个表格展示的数据相当多的时候,经常会用到固定列,固定行的事情原理是两个或者多个表格组合行程固定行或者固定列的情况 ,为了保障样式的统一性当固定行的时候,要限定宽当固定列的时候,要限定高 ...
python docx 加粗的边框_修改固定行与列的加粗边框显示样式
Spreadfor ASP.NET 6.0产品中提供了固定行与固定列的功能,用户只需设置以下两行代码就可以实现: this.FpSpread1.Sheets[0].FrozenRowCount = 2 ...

固定行表头，固定列的html

固定行表头，固定列的html相关推荐

最新文章

热门文章