效果图:
HTML:
<table class="tablehead">
<tr>
<td style="width:40px;">序号</td>
<td>品名</td>
<td style="width:150px;">货号</td>
<td style="width:100px;">原价</td>
<td style="width:100px;">单价</td>
<td style="width:100px;">数量</td>
<td style="width:200px;">小计</td>
<td style="width:136px;">操作</td>
</tr>
</table>
<div class="tablebodyBox">
<table class="tablebody">
<td style="width:40px;">序号</td>
<td>品名</td>
<td style="width:150px;">货号</td>
<td style="width:100px;">原价</td>
<td style="width:100px;">单价</td>
<td style="width:100px;">数量</td>
<td style="width:200px;">小计</td>
<td style="width:120px;">操作</td>
</table>
</div>
CSS:
.tablehead {
table-layout:fixed;
clear:both;
width:100%;
height:40px;
border:#ccc 1px solid;
margin-top:10px;
background-color:#eee;
}
.tablebody {
table-layout:fixed;
clear:both;
width:100%;
margin-top:-1px;
}
table td {
border:#ccc 1px solid;
text-align:center;
}
table tr {
width:100%;
height:40px;
}
.tablebodyBox {
overflow-x: hidden;
width:100%;
overflow-y:scroll;
border-bottom:1px solid #ccc;
}