レスポンシブ対応の表
html / CSS

特定の領域に レスポンシブ対応の 表を配置する

First

表を用いたレスポンシブ対応

一般的な表を作る

表を特定の場所へ填め込んでみる。ここで、想定した余白を確保し、はみ出さない、尚且つモバイルで塩梅良く表示しているかがポイントである。たっぷり時間をかけて、いくつかのタイプで表を試した結果、おススメは以下のものだ。

<div class="table-container">
  <table id="adhere">
    <tr>
      <th class="fixed03">
        <span class="corner"></span>
      </th>
      <th class="fixed01">体格</th>
      <th class="fixed01">ヒラメ筋</th>
      <th class="fixed01">大腿四頭筋</th>
      <th class="fixed01">前腕屈筋</th>
      <th class="fixed01">大臀筋</th>
    </tr>
    <tr>
      <th class="fixed02">January</th>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 20%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 60%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
    </tr>
    <tr>
      <th class="fixed02">February</th>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 30%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 60%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 65%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
    </tr>
    <tr>
      <th class="fixed02">March</th>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 40%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 70%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 70%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 55%</div>
        </div>
      </td>
    </tr>
    <tr>
      <th class="fixed02">April</th>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 50%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 80%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 70%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 60%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 55%</div>
        </div>
      </td>
    </tr>
    <tr>
      <th class="fixed02">May</th>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 60%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 80%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 75%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 60%</div>
        </div>
      </td>
      <td>
        <div class="graph-container">
          <div class="label">Progress: 60%</div>
        </div>
      </td>
    </tr>
  </table>
</div>
/* テーブルを囲む親要素 */
.table-container {
  width: 100%;
  overflow-x: auto; /* 横スクロールを許可 */
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
  margin-bottom: 1em;
}
table#adhere {
  width: 90%;
  /*width: auto; */
 border-collapse: collapse; 
 border-spacing: 0;         /* 隙間を0にする */
 margin: 0 auto;
 font-size: 0.7em;
 background-color: white;
}

table#adhere th {
  width: 80px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  border: 1px solid #ccc;
}
table#adhere td {
  width: 80px;
  height: 40px;
  vertical-align: middle;
  padding: 0 4px;
  border: 1px solid #ccc;
}
.fixed01 {
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: Darkorange;
}

.fixed02 {
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: Forestgreen;
}
.fixed03 {
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background-color: white;
}
.fixed01:before,.fixed03:before,
.fixed02:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

.fixed01 {
  z-index: 2;
}

.fixed02 {
  z-index: 1;
}
.fixed03 {
  z-index: 3;
}
.corner {
  position: relative;
  width: 100%;
  height: 100%;
 }
体格 ヒラメ筋 大腿四頭筋 前腕屈筋 大臀筋
January
Progress: 20%
Progress: 50%
Progress: 60%
Progress: 50%
Progress: 50%
February
Progress: 30%
Progress: 60%
Progress: 65%
Progress: 50%
Progress: 50%
March
Progress: 40%
Progress: 70%
Progress: 70%
Progress: 50%
Progress: 55%
April
Progress: 50%
Progress: 80%
Progress: 70%
Progress: 60%
Progress: 55%
May
Progress: 60%
Progress: 80%
Progress: 75%
Progress: 60%
Progress: 60%
Second

表の基本構成

行に項目とデータを入れる

<table>タグは、HTMLでデータ行と列からなる2次元の表を作成するためのタグだ。基本構造は、<table>（大枠）の中に<tr>（行）(Table Row)を配置し、その中に<th>（見出しセル） (Table Header)や<td>（データセル）(Table Data)を入れる。見出しは太字で中央揃え、データは通常表示となる。

<table>
  <tr>
    <th>項目A</th>
    <th>項目B</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

<tbody>を使う

<tbody> は HTML の要素で、表の一連の行（<tr> 要素）を内包し、その部分が表（<table>）の本体部分を構成することを表す。場面的には構造的な明確さと長表対応のために使用することが多い。

colspan="2"は、HTMLのテーブル（<table>）において、1つのセルを水平方向（横）に2列分結合する属性である。<th>または<td>タグに使用し、結合した分だけ右側のセルタグ（<td>など）を削除して列数を調整する必要がある。

<table id="table-3">
  <thead>
    <tr>
      <th>作家名</th>
      <th>作品</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">ハードボイルド御三家</th>
    </tr>
    <tr>
      <td>ダシール・ハメット</td>
      <td>『マルタの鷹』</td>
    </tr>
    <tr>
      <td>レイモンド・チャンドラー</td>
      <td>『ロング・グッドバイ』</td>
    </tr>
    <tr>
      <td>ロス・マクドナルド</td>
      <td>『動く標的』</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">日本文学</th>
    </tr>
    <tr>
      <td>北方謙三</td>
      <td>『眠りなき夜』</td>
    </tr>
    <tr>
      <td>生島治郎</td>
      <td>『追跡』</td>
    </tr>
    <tr>
      <td>大藪春彦</td>
      <td>『野獣死すべし』</td>
    </tr>
  </tbody>
</table>
作家名 作品
ハードボイルド御三家
ダシール・ハメット 『マルタの鷹』
レイモンド・チャンドラー 『ロング・グッドバイ』
ロス・マクドナルド 『動く標的』
日本文学
北方謙三 『眠りなき夜』
生島治郎 『追跡』
大藪春彦 『野獣死すべし』
Third

横スクロール時、項目を固定する

position: sticky;

横スクロール時、項目を固定するには、「position: sticky;」を使う。固定したい各々の項目である「th (表見出し要素)」に使用する。

.sticky-item {
  position: sticky;
  top: 0; /* どこで固定するか（必須） */
  background-color: #fff;
  z-index: 10; /* 他の要素の下に隠れないように */
}
体格 ヒラメ筋 大腿四頭筋 前腕屈筋 大臀筋
January
Progress: 20%
Progress: 50%
Progress: 60%
Progress: 50%
Progress: 50%
February
Progress: 30%
Progress: 60%
Progress: 65%
Progress: 50%
Progress: 50%
March
Progress: 40%
Progress: 70%
Progress: 70%
Progress: 50%
Progress: 55%
April
Progress: 50%
Progress: 80%
Progress: 70%
Progress: 60%
Progress: 55%
May
Progress: 60%
Progress: 80%
Progress: 75%
Progress: 60%
Progress: 60%
Fourth

display: flex; を使って表を作る

均等に横三列の項目を配し、三列目の項目は横スクロールする

content-1
content-2
content-3(Try filling in the letters. /capture)
content-4
content-5
content-6(Try filling in the letters. /etc.)

display: flex;は、CSSで要素（子要素）を簡単に横並び・縦並びに配置し、余白や順序を柔軟に制御できる「Flexbox」レイアウトを有効にするプロパティである。親要素（コンテナ）に指定するだけで、子要素（アイテム）が自動的に左詰めで1行に並び、整列やサイズ調整が容易になる。

.container-table {
    display: flex;
    width: 90%;
    gap: 10px; /* 列間の隙間 */
    background-color: #f7f7f7;
    padding: 5px 0;
    margin: 0 auto;
  }
  /* 3列目の中身を幅広くする（はみ出させるため） */
  .scroll-content {
    width: 200%; /* 3列目の親要素の幅より大きくする */
  }
<div class="container-table">
  <div class="col color-1">content-1</div>
  <div class="col color-2">content-2 </div>
  <div class="col color-3">
    <!-- スクロールする中身 -->
    <div class="scroll-content">content-3(Try filling in the letters. /capture) </div>
  </div>
</div>
<div class="container-table">
  <div class="col color-1">content-4</div>
  <div class="col color-2">content-5 </div>
  <div class="col color-3">
    <!-- スクロールする中身 -->
    <div class="scroll-content">content-6(Try filling in the letters. /etc.) </div>
  </div>
</div>
Fifth

表の余白（border-collapse: collapse; と border-spacing: 0;）

padding プロパティを使用して、th（見出しセル）と td（データセル）の余白を調整する。

border-collapse: collapse; と border-spacing: 0;

<table>
  <thead>
    <tr>
      <th>header-1</th>
      <th>header-2</th>
      <th>header-3</th>
      <th>header-4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data-1</td>
      <td>data-2</td>
      <td>data-3</td>
      <td>data-4</td>
    </tr>
  </tbody>
</table>}

例えば、次の表は CSS を宛てていない html だけの表組だ。これに CSS で余白等を調整してみよう。

html のみの表

header-1 header-2 header-3 header-4
data-1 data-2 data-3 data-4

html に CSS を追加した表

header-1 header-2 header-3 header-4
data-1 data-2 data-3 data-4

余白を狭めたのは次のCSSである。これを<td> と <th> に各々追加した。

style="border-collapse: collapse; border-spacing: 0; padding: 4px 4px; margin: 0; line-height: 1; "

table-layout を使う

table-layout は CSS のプロパティで、<table> のセル、行、列のレイアウトに使用されるアルゴリズムを設定する。

(例)
table-layout: auto;
width: 100%;

table-layout: fixed;
width: 300px;
h-1 h-2 h-3 h-4
data-1 data-2 data-3 data-4