ヘッダ固定のスクロールテーブル

• トップ
• 逆引きリファレンス
• ヘッダ固定のスクロールテーブル

• 概要
• サンプル
• ソース

概要

スクロールしてもヘッダ部はスクロールアウトせずに固定表示するテーブルを作成します。

サンプル

ソース

.header-fixed-table {
  width: 400px;
  height: 150px;
  overflow-y: scroll;
  table {
    border-collapse: collapse;
    width: 500px;
    thead th {
      z-index: 2;
      &:first-of-type {
        z-index: 3;
      }
    }
    tbody th {
      z-index: 1;
    }
    th {
      position: sticky;
      top: 0;
      left: 0;
      background: #ddd;
      border: 1px solid #ccc;
      &:before{
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
      }
    }
    td {
      border: 1px solid #ccc;
    }
  }
}

<div class="header-fixed-table">
<table>
  <thead>
    <tr><th></th><th>A</th><th>B</th><th>C</th><th>D</th></tr>
  </thead>
  <tbody>
    <tr><th>1</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>2</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>3</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>4</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>5</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>6</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>7</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>8</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>9</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>10</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>11</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>12</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>13</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>14</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>15</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
    <tr><th>16</th><td>...</td><td>...</td><td>...</td><td>...</td></tr>
  </tbody>
</table>
</div>