|
|
|
|
|
當(dāng)表格內(nèi)容太多的時(shí)候,固定表頭不讓標(biāo)題滾出屏幕外,是一個(gè)很人性化的設(shè)計(jì);而當(dāng)橫向項(xiàng)目內(nèi)容太多時(shí),固定第一列(項(xiàng)目列)也是一個(gè)很貼心的設(shè)計(jì)。本文介紹如何用CSS實(shí)現(xiàn)固定Table表頭和第一列。
固定Table表頭和第一列
CSS
table {
font-family: "Fraunces", serif;
font-size: 125%;
white-space: nowrap;
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
border: 1px solid black;
}
table td,
table th {
border: 1px solid black;
padding: 0.5rem 1rem;
}
table thead th {
padding: 3px;
position: sticky;
top: 0;
z-index: 1;
width: 25vw;
background: white;
}
table td {
background: #fff;
padding: 4px 5px;
text-align: center;
}
table tbody th {
font-weight: 100;
font-style: italic;
text-align: left;
position: relative;
}
table thead th:first-child {
position: sticky;
left: 0;
z-index: 2;
}
table tbody th {
position: sticky;
left: 0;
background: white;
z-index: 1;
}
caption {
text-align: left;
padding: 0.25rem;
position: sticky;
left: 0;
}
[role="region"][aria-labelledby][tabindex] {
width: 450px;
height: 400px;
overflow: auto;
box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.5);
outline: 0;
}
HTML
<div role="region" aria-labelledby="caption" tabindex="0">
<table>
<caption id="caption">棒球號(hào)碼</caption>
<thead>
<tr>
<th>Teams</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>Runs</th>
</tr>
</thead>
<tbody>
<tr>
<th>Milwaukee Brewers</th>
<td>2</td>
<td>0</td>
<td>4</td>
<td>1</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>3</td>
<td>4</td>
<td>17</td>
</tr>
<tr>
<th>Los Angles Dodgers</th>
<td>0</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
代碼解釋
這里的“技巧”部分是position: sticky;
用法,但更重要的是你必須知道如何處理重疊元素。
固定表格單元格需要有背景,否則我們會(huì)看到重疊的內(nèi)容。它還需要適當(dāng)?shù)?code>z-index處理,以便當(dāng)它固定到位時(shí),它會(huì)位于它應(yīng)該位于的頂部。這感覺是最棘手的部分:
tbody>th
單元格位于常規(guī)表格單元格上方,以便它們在水平滾動(dòng)期間保持在頂部。thead>th
單元格在這些單元格之上,以便垂直滾動(dòng)。thead>th:first-child
單元格是最高的,因?yàn)樗枰挥谡膯卧裆戏?,并且它又是水平滾動(dòng)的同級(jí)標(biāo)題。只固定Table表頭
如果只想固定Table表頭,那么很簡單,我們只需把前面的HTML代碼<th>...</th>
這列即是第一列去掉即可。
只固定Table表頭