程序博客网 > 软件企业资格认证

固定行表头，固定列的html

来源：互联网发布：软件企业资格认证编辑：程序博客网时间：2024/05/23 19:16

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

画面显示

软件企业资格认证

软件企业资格认证

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子怀孕期间检查项目女人孕前检查有哪些项目首次孕检项目孕妇产前检查孕妇b超检查时间表产前诊断女性孕前检查孕检时间产科检查整个孕期的检查项目怀孕初期检查哪些项目怀孕检查流程及费用孕检多久检查一次第1次孕检什么流程孕检流程孕期b超检查时间表怀孕前做什么检查免费孕检有哪些项目孕妇检查流程孕前检查都查什么产后42天检查费用哪里可以做孕检产前需要做什么检查为什么要孕检孕检必检项目什么时间孕检产后检查需要多少钱产前要做什么检查免费孕检哪里能做孕检产后多少天检查孕检必做项目什么时候开始孕检怎么做孕检孕检哪里做做孕检都检查什么孕检哪里好孕16周做什么产检什么时间开始产检什么时候开始产检孕妇什么时候产检