html+css 定宽可左右滚动表格
2021-03-15
摘自网络
<html>
<HEAD>
<title>定宽可左右滚动表格</title>
<style>
.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;
}
</style>
</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"> </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"></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>