HTML，CSS，帶修正標題的表格滾動

我希望我的表格能夠使用修訂標題垂直滾動。我也想讓表格寬度適合瀏覽器。HTML，CSS，帶修正標題的表格滾動

**請儘可能不要作出了 'HTML' 部分的任何變化，只是在 'CSS' 部分，

這裏是我的JSfiddle

table{ 
 
    border-spacing: 0; 
 
    border: 2px solid black; 
 
} 
 

 
table tbody tr td, thead th { 
 
    border-right: 1px solid black; 
 
}

<div class="table_container"> 
 
    <table> 
 
    <thead> 
 
    <tr> 
 
     <th>Head 1</th> 
 
     <th>Head 2</th> 
 
     <th>Head 3</th> 
 
     <th>Head 4</th> 
 
     <th>Head 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2016-11-28 Rocky

您是否嘗試過什麼了嗎？ – Aytee

是的，但它只是搞砸了所有的東西 – Rocky

可能的重複[HTML表與固定的標頭？]（http://stackoverflow.com/questions/673153/html-table-with-fixed-headers） –

試試這個

.table_container table{ 
    display: table; 
    width: 100%; 
} 
    .table_container table thead, .table_container table tbody { 
    float: left; 
    width: 100%; 
} 
    .table_container table tbody { 
    overflow: auto; 
    height: 70px; 
} 
    .table_container table tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 
    .table_container table th, .table_container table td { 
    width:20%; 
}

來源

2016-11-28 08:46:32

非常感謝，但是我們可以根據其內容長度自動調整列和標題嗎？ – Rocky

只需刪除寬度.table_container表th，.table_container表td {}，它將自動調整 –

我做到了，但表格數據未在其標題上對齊 – Rocky

-1

上午不是重新創造事物的大粉絲，所以md_data_table是一個很好的選擇。（可與角1.5.8，將在Angular2支持以及）

https://github.com/iamisti/mdDataTable

bower install md-data-table --save

浮游生物

來源

2016-11-28 11:55:02 Plankton

HTML，CSS，帶修正標題的表格滾動

回答

相關問題