CSS題目系列（1） - 可滾動的Table

描述

在開發中，有這樣一個需求，Table的表頭不動，表身可以滾動，效果請點選以下連結檢視：

gd4ark.github.io/blog_demos/…

正文

假設我們有一個這樣結構的表格：

<table>
    <thead>
        <tr>
            <th>Position</th>
            <th>Name</th>
            <th>Score</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
        <!-- 這裡為了方便展示 只顯示一行 -->
        <tr>
            <td>0</td>
            <td>張三</td>
            <td>15</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
複製程式碼

設定表身樣式：

table tbody {
	display: block;
	height: 200px;            
	overflow-y: auto;
}
複製程式碼

這時候，表身已經實現了滾動，但是有個問題，td縮在了一堆，如下：

加上這個就好了：

table thead,
tbody tr {
	display: table;
	table-layout: fixed; /* 使用表格固定演算法 必須配合上面一起使用 */
	width: 100%;
}
複製程式碼

完整程式碼：github.com/gd4Ark/blog…

後記

剛剛開始寫文章，很多地方寫的不夠好，望諒解，我會慢慢改進的。

注：此文為原創文章，如需轉載，請註明出處。

原文連結