最近は IE11 対応もめっきりなくなり、position: sticky; が自由に利用できるようになりました。
そこで利用したいのが、 table の th の position: sticky; 。
罫線がある表組みだとちょっとやっかいだったので、テンプレートを作成してみました。
共通CSS
表組みの見栄えに関する共通設定。
scss
.tableWrapper {
width: 100%;
max-width: 1019px;
margin: 0 auto;
overflow: auto;
border: 1px solid #ccc;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: separate;
}
th,
td {
width: 100px;
padding: 0.5em 1em;
text-align: center;
}
th {
background-color: #eee;
}
thead {
th {
border-bottom: 1px solid #ccc;
&:not(:last-child) {
border-right: 1px solid #ccc;
}
}
}
tbody {
th,
td {
&:not(:last-child) {
border-right: 1px solid #ccc;
}
}
tr {
&:not(:last-child) {
th,
td {
border-bottom: 1px solid #ccc;
}
}
}
}
垂直固定
html
<div class="tableWrapper">
<table>
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<!-- 以下省略 -->
</tbody>
</table>
</div>
scss
.tableWrapper {
height: 270px;
}
thead {
th {
position: sticky;
top: 0;
}
}
水平固定
html
<div class="tableWrapper">
<table>
<tbody>
<tr>
<th scope="row">1</th>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<!-- 以下省略 -->
</tbody>
</table>
</div>
scss
tbody {
th {
position: sticky;
left: 0;
}
}
垂直・水平固定
html
<div class="tableWrapper">
<table>
<thead>
<tr>
<th></th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<!-- 以下省略 -->
</tbody>
</table>
</div>
scss
.tableWrapper {
height: 270px;
}
thead {
th {
position: sticky;
top: 0;
z-index: 1;
&:first-child {
left: 0;
z-index: 2;
}
}
}
tbody {
th {
position: sticky;
left: 0;
z-index: 1;
}
}
デモ
See the Pen
Table Sticky Header by Takuya Mori (@taqumo)
on CodePen.
↧