有時候需要使用表格來展示一些數據，通常有兩種方式：分頁和全量。
全量展示時，如果數據量大，表格就會非常的長，視覺和使用效果都很差。
如果表格可以固定長度，內容可以上下滾動，且標題不動，這樣看起來就好多了。
那麼該如何實現呢？這裏想到了一種方法，即表格內部再嵌入一個表格，內部固定高度，以達到滾動的效果。
示例代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table {
border: #888FEA 1px solid;
border-spacing: 0px;
text-align: center;
}
th, tr, td {
border: #888FEA 1px solid;
}
th {
background-color: #98AEFD;
}
#id {
width: 40px;
}
#c1 {
width: 150px;
}
</style>
</head>
<body>
<table style="width: 300px;">
<tr>
<th id="id">id</th>
<th id="c1">名稱</th>
<th>數量</th>
</tr>
<tr>
<td colspan="3">
<div id="list" style="overflow-x: hidden; width: 100%; height: 120px;"> <!-- 這個是核心 -->
<table style="margin: -2px -2px -2px -2px; width: 100%; border: 0px">
<tr>
<td id="id">1</td>
<td id="c1">cat</td>
<td>100</td>
</tr>
<tr>
<td id="id">2</td>
<td id="c1">dog</td>
<td>200</td>
</tr>
<tr>
<td id="id">3</td>
<td id="c1">bird</td>
<td>150</td>
</tr>
<tr>
<td id="id">4</td>
<td id="c1">mouse</td>
<td>1000</td>
</tr>
<tr>
<td id="id">5</td>
<td id="c1">tiger</td>
<td>1</td>
</tr>
<tr>
<td id="id">6</td>
<td id="c1">monkey</td>
<td>3</td>
</tr>
<tr>
<td id="id">7</td>
<td id="c1">snake</td>
<td>99</td>
</tr>
<tr>
<td id="id">8</td>
<td id="c1">flower</td>
<td>999</td>
</tr>
<tr>
<td id="id">9</td>
<td id="c1">bug</td>
<td>0</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>效果如下：
有其他實現方式歡迎一起交流～