overflow問題--滾動設置？

左邊保持不變，右邊多出來的table的td要設置為overflow:scroll,但是有個問題，就是，無論td的寬度設置為多少，它都會按照表格的百分之百來自適應，根本不會出現滾動條，查閱了一些資料以后，找到了解決方案。 
1.table要給它設定一個父級div,並且設置父級div的屬性 
-overflow:auto;display:block。 
2.設置table的屬性 
-min-width:100% 
3.設置table td的屬性： 
-min-width:50px

代碼：<style> div{ overflow:auto; display:block; } div table{ min-width:100%; } div table td{ min-width:50px; } </style> <div style="overflow:auto;display:block"> <table style="min-width:100%"> <tr> <td>test</td> <tr> </table> </div>

 

table的head不動，body如何設置overflow:scroll

html結構

<table class="sys-table"> <thead> <tr> <th>序列</th> <th>系統ID</th> <th>系統名稱</th> <th>是否啟用</th> <th>publicKey</th> <th>司機指標</th> <th>貨主指標</th> </tr> </thead> <tbody> <tr> <td>序列</td> <td>系統ID</td> <td>系統名稱</td> <td>是否啟用</td> <td>publicKey</td> <td>司機指標</td> <td>貨主指標</td> </tr> </tbody> </table>

sass樣式

.sys-table{ width: 100%; border-collapse:collapse; border-spacing:0; thead { display: block; width: 100%; background-color: orange; } tbody{ display: block; height: 70px; background-color: palegoldenrod; overflow-y: auto; width: 100%; } tr{ display: block; width: 100%; border-bottom: 1px solid $white; } td,th{ padding: 10px; text-align: center; } }