效果图:
css:
/*table---start*/
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
/*table---end*/
HTML:
<table style="width: 600px;height: 600px">
<thead>
<tr>
<th>序号 </th>
<th>名称 </th>
<th>地址</th>
<th>地名类别</th>
</tr>
</thead>
<tbody id="file_table_tbody" style="width: 100%;height: calc(100% - 20px);overflow-y: auto;">
<tr class="tr1"><td>1</td><td>aaaaaa</td><td>aaa</td><td>aaa</td></tr>
<tr class="tr1"><td>1</td><td>aaaaaa</td><td>aaa</td><td>aaa</td></tr>
<tr class="tr1"><td>1</td><td>aaaaaa</td><td>aaa</td><td>aaa</td></tr>
<tr class="tr1"><td>1</td><td>aaaaaa</td><td>aaa</td><td>aaa</td></tr>
</tbody>
</table>