HTML table表頭固定

說說我在最近專案中碰到的css問題吧:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table tbody {
            display: block;
            height: 200px;
            overflow-y: scroll;
        }
 
        table thead,
        table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            text-align: center;
        }
 
        thead th,
        tbody td {
            width: 50px;
        }
 
        table thead {
            width: calc( 100% - 1em);
        }

		</style>
	</head>
	<body>
	<div style="width: 800px;">
        <div class="table-head">
            <table align="center">
                <thead>
                    <tr>
                        <th>序號</th>
                        <th>內容</th>
                    </tr>
                </thead>
                <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>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

  順便做做筆記說說px、em、rem的區別:

  px是固定的畫素,一旦設定了就無法因為適應頁面大小而改變。

  em和rem相對於px更具有靈活性,他們是相對長度單位,意思是長度不是定死了的,更適用於響應式佈局。

  對於em和rem的區別一句話概括:em相對於父元素大小,rem相對於根元素大小(html元素)。

  rem中的r意思是root(根源),這也就不難理解了。

 

em/rem:用於做響應式頁面,不過我更傾向於rem,因為em不同元素的參照物不一樣(都是該元素父元素),所以在計算的時候不方便,相比之下rem就只有一個參照物(html元素),這樣計算起來更清晰。