【CSS】table のヘッダー行と列を固定する

最近は 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;
  }
}

DEMO

See the Pen Table Sticky Header by Takuya Mori (@taqumo) on CodePen.