固定行表头,固定列的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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="right" > 0 </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="left" > </ td > < td align ="right" > 0 </ 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 > </ DIV > </ CENTER > </ body > </ html > 画面显示