轉自：http://blog.csdn.net/hualele/article/details/52993315

?

<div style="width: 800px;"><div class="table-head"><table><colgroup><col style="width: 80px;" /><col /></colgroup><thead><tr><th>序號</th><th>內(nèi)容</th></tr></thead></table></div><div class="table-body"><table><colgroup><col style="width: 80px;" /><col /></colgroup><tbody><tr><td>1</td><td>我只是用來測試的</td></tr><tr><td>2</td><td>我只是用來測試的</td></tr><tr><td>3</td><td>我只是用來測試的</td></tr><tr><td>4</td><td>我只是用來測試的</td></tr><tr><td>5</td><td>我只是用來測試的</td></tr><tr><td>6</td><td>我只是用來測試的</td></tr><tr><td>7</td><td>我只是用來測試的</td></tr><tr><td>8</td><td>我只是用來測試的</td></tr><tr><td>9</td><td>我只是用來測試的</td></tr><tr><td>10</td><td>我只是用來測試的</td></tr><tr><td>11</td><td>我只是用來測試的</td></tr><tr><td>12</td><td>我只是用來測試的</td></tr><tr><td>13</td><td>我只是用來測試的</td></tr><tr><td>14</td><td>我只是用來測試的</td></tr><tr><td>15</td><td>我只是用來測試的</td></tr></tbody></table></div></div>

　　

下面是css樣式

?

.table-head{padding-right:17px;background-color:#999;color:#000;} .table-body{width:100%; height:300px;overflow-y:scroll;} .table-head table,.table-body table{width:100%;} .table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}

　　

?

1、使用了colgroup標簽，來對上下兩個表格的列寬進行了定義，讓他們保持一致。

2、上邊的div .table-head添加了樣式?padding-right?:?17px?，這個寬度是為了保證跟下邊的div .table-body的滾動條保持一致，同時下邊的表格.table-body添加了樣式?overflow-y?:?scroll?;

?

以上方法試了后，發(fā)現(xiàn)有時會出現(xiàn)寬度不對齊的問題，當然了可以設置每個th td的寬度就可以修改這個問題了，但是

我覺得因為還是用了2個table的原因吧，覺得還是好復雜，所有就重新查詢了一下，發(fā)現(xiàn)還真有好的解決方法：

一個table中thead ?tbody就可以了。

?

table tbody {display:block;height:500px;overflow-y:scroll; }table thead, tbody tr {display:table;width:100%;table-layout:fixed; }table thead {width: calc( 100% - 1em ) }

?

/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();

　　

這樣就可以了，這是我看到的，試了試，可以實現(xiàn)。

轉載于:https://www.cnblogs.com/bjxingch/articles/8398467.html

總結

以上是生活随笔為你收集整理的table中head表头固定，body滚动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。