position:stickyを使ってテーブルの1行目を固定する【css】

2022年11月22日2024年6月19日

デザイナーのオッコです。

表が長くなると、見出しを固定したくなることがありますね。

今日はそんなときに使える、position:stickyを使った処理をご紹介したいと思います。

前提：UIKitを使用しているためある程度のテーブルが既に出来上がっている（ukクラスの記載は省略）

【html】
<div class="contents sticky-container">
/* 中略 */
　<table>
　　<tbody>
　　　<tr class="sticky-item">
　　　　<th colspan="1">見出し1</th>
　　　　<th colspan="1">見出し2</th>
　　　　<th colspan="2">見出し3</th>
　　　　<th colspan="2">見出し4</th>
　　　</tr>
　　　<tr class="sticky-item">
　　　　<th colspan="1">サブ見出し1</th>
　　　　<th colspan="1">サブ見出し2</th>
　　　　<th colspan="1">サブ見出し3</th>
　　　　<th colspan="1">サブ見出し4</th>
　　　　<th colspan="1">サブ見出し5</th>
　　　　<th colspan="1">サブ見出し6</th>
　　　</tr>
　　　<tr>
　　　　<td colspan="1">内容1</th>
　　　　<td colspan="1">内容2</th>
　　　　<td colspan="1">内容3</th>
　　　　<td colspan="1">内容4</th>
　　　　<td colspan="1">内容5</th>
　　　　<td colspan="1">内容6</th>
　　　</tr>
　　</tbody>
　</table>
</div>

【css】

.contents.sticky-container {
    overflow: visible;
    /* sticky-itemの親要素・先祖要素はoverflowがvisibleの必要がある */
}

.sticky-container table {
    border-collapse: separate;
    /* tableがborder-collapse:collapseだとborderが固定されない */
}

.sticky-item {
    position: sticky;　/* 必須処理 */
    top: 〇〇px;　/* 固定する高さを指定（ヘッダがない場合0でおk） */
    border: solid #CCC;
    border-width: 1px 0 0 1px;
    /* border-collapseをseparateにした対応で、borderを付け直し */
}

.sticky-item:nth-child(2) {
    /* 見出しが2行ある場合、2行目trに対しtopを再設定 */
    top: 〇〇px;　/* 1行目の要素の高さ */
}

/* 以下全てborder-collapse:separate対応 */

.sticky-item th {
    border-top: solid 1px #CCC;
}

th, td {
    border: solid #CCC;
    border-width: 0 1px 1px 0;
}

th:first-child, td:first-child {
    border-left: solid 1px #CCC;
}

tr:first-child th {
    border-bottom: 0;
}

自分で一からテーブルを作成する場合は、overflow: visible;やborder-collapse: separate;の処理はいらない可能性もあります。

しかし、行を固定したいという要望が出るのはテーブルを作成し終わった後だったりしますよね。

そんなときに陥りやすいポイントが、以下2点です。