狭い画面でも読める表を作る

<!-- スクロールできる領域はキーボードでも動かせる必要がある。
     tabindex="0" と、何の表かを示す名前を付ける。 -->
<div class="table-scroll" tabindex="0" role="region" aria-label="料金プランの比較（横スクロール）">
  <table>
    <caption>2026年9月現在の月額料金（税込）</caption>
    <thead>
      <tr>
        <!-- 列見出しか行見出しかを scope で明示する。これが無いと
             スクリーンリーダーはセルの対応を推測するしかない。 -->
        <th scope="col">プラン</th>
        <th scope="col">月額</th>
        <th scope="col">保存容量</th>
        <th scope="col">同時接続</th>
        <th scope="col">サポート</th>
        <th scope="col">SLA</th>
        <th scope="col">バックアップ</th>
        <th scope="col">独自ドメイン</th>
        <th scope="col">監査ログ</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">フリー</th>
        <td class="num">¥0</td>
        <td class="num">1 GB</td>
        <td class="num">1</td>
        <td>コミュニティ</td>
        <td>なし</td>
        <td>なし</td>
        <td>不可</td>
        <td>なし</td>
      </tr>
      <tr>
        <th scope="row">スタンダード</th>
        <td class="num">¥1,480</td>
        <td class="num">100 GB</td>
        <td class="num">5</td>
        <td>メール（平日）</td>
        <td>99.5%</td>
        <td>日次・7日保持</td>
        <td>1件</td>
        <td>30日</td>
      </tr>
      <tr>
        <th scope="row">プロ</th>
        <td class="num">¥4,800</td>
        <td class="num">1 TB</td>
        <td class="num">25</td>
        <td>メール（24時間）</td>
        <td>99.9%</td>
        <td>日次・30日保持</td>
        <td>5件</td>
        <td>1年</td>
      </tr>
      <tr>
        <th scope="row">エンタープライズ</th>
        <td class="num">¥19,800</td>
        <td class="num">無制限</td>
        <td class="num">100</td>
        <td>専任担当</td>
        <td>99.99%</td>
        <td>時間単位・90日保持</td>
        <td>無制限</td>
        <td>無期限</td>
      </tr>
    </tbody>
  </table>
</div>

/* スクロールするのは table ではなく、外側の入れ物。
   table 自体に overflow を掛けても効かない。 */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;

  /* 端に影を出して「まだ右がある」ことを見た目で伝える。
     背景を2枚（白のグラデ＝マスク／影）重ね、
     background-attachment: local と scroll の差で
     スクロール位置に応じて影が出入りする。JavaScript は要らない。 */
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(20, 24, 36, .14), rgba(20, 24, 36, 0)),
    linear-gradient(to left, rgba(20, 24, 36, .14), rgba(20, 24, 36, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

table {
  border-collapse: collapse;
  /* 折り返させない列があるので、中身なりに広がってよい。
     width: 100% にすると狭い画面で潰れて読めなくなる。 */
  min-width: 100%;
  font-size: .88rem;
}

caption {
  caption-side: top;
  text-align: left;
  padding: .8rem .9rem .2rem;
  font-size: .84rem;
  line-height: 1.85;
  color: var(--muted);
}

th, td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  line-height: 1.8;
}
thead th {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  background: #fbfcfe;
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

/* 見出し列を左に貼り付ける。横に流したとき「どの行か」を
   見失わないための処置で、比較表では必須に近い。 */
tbody th[scope="row"],
thead th:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  /* 固定した列と本体の境目。影が無いと重なりが分からない。 */
  box-shadow: 1px 0 0 var(--line);
}
thead th:first-child { background: #fbfcfe; }

/* 数字は等幅の数字書体にする。桁が揃わないと比較できない。 */
td.num { text-align: right; font-variant-numeric: tabular-nums; }

<div class="table-host">
  <table role="table">
    <caption>直近の注文</caption>
    <thead>
      <tr role="row">
        <th scope="col" role="columnheader">注文番号</th>
        <th scope="col" role="columnheader">日付</th>
        <th scope="col" role="columnheader">金額</th>
        <th scope="col" role="columnheader">状態</th>
      </tr>
    </thead>
    <tbody>
      <!-- display を block に変えると表としての内部構造が失われるので、
           role を書いて元の意味を残す。data-label は畳んだときの
           見出しに使う。文字列は thead と同じものにする。 -->
      <tr role="row">
        <th scope="row" role="rowheader">#10482</th>
        <td role="cell" data-label="日付">2026-08-28</td>
        <td role="cell" class="num" data-label="金額">¥12,800</td>
        <td role="cell" data-label="状態"><span class="badge">発送済み</span></td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">#10481</th>
        <td role="cell" data-label="日付">2026-08-27</td>
        <td role="cell" class="num" data-label="金額">¥3,200</td>
        <td role="cell" data-label="状態"><span class="badge">準備中</span></td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">#10480</th>
        <td role="cell" data-label="日付">2026-08-25</td>
        <td role="cell" class="num" data-label="金額">¥48,600</td>
        <td role="cell" data-label="状態"><span class="badge">発送済み</span></td>
      </tr>
      <tr role="row">
        <th scope="row" role="rowheader">#10479</th>
        <td role="cell" data-label="日付">2026-08-21</td>
        <td role="cell" class="num" data-label="金額">¥980</td>
        <td role="cell" data-label="状態"><span class="badge">キャンセル</span></td>
      </tr>
    </tbody>
  </table>
</div>

.table-host { container-type: inline-size; }

table { border-collapse: collapse; width: 100%; font-size: .88rem; background: #fff; }
caption {
  caption-side: top; text-align: left;
  padding: 0 0 .5rem; font-size: .84rem; line-height: 1.85; color: var(--muted);
}
th, td {
  padding: .6rem .8rem; border-bottom: 1px solid var(--line);
  text-align: left; line-height: 1.8;
}
thead th { font-size: .78rem; color: var(--muted); font-weight: 600; background: #fbfcfe; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block; padding: .05rem .5rem; border-radius: 999px;
  font-size: .74rem; line-height: 1.8; background: #eff6ff; color: var(--accent);
}

/* 置き場所が 520px を切ったらカードに畳む。
   画面幅ではなく親の幅で判断するので、この表を
   サイドバーに置いても本文に置いても正しく振る舞う。 */
@container (max-width: 520px) {
  /* thead は隠すが display: none にはしない。
     見出しの文字列は各セルの ::before で使い回すため、
     HTML からは消さずに視覚的にだけ隠す。 */
  thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* table / tr / td の display を変えると、ブラウザ内部の表としての
     扱いも変わる。行と列の対応を失わないよう、role を明示して
     元の意味を保ったまま見た目だけを変える（HTML 側に role を書く）。 */
  table, tbody, tr, th, td { display: block; }

  tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem .9rem;
    margin-bottom: .7rem;
  }
  tr:last-child { margin-bottom: 0; }

  th[scope="row"] {
    border-bottom: 1px solid var(--line);
    padding: 0 0 .5rem;
    margin-bottom: .5rem;
    font-size: .98rem;
  }

  td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    padding: .15rem 0;
  }
  /* 見出しは data 属性から出す。文字列を CSS に直接書くと、
     HTML の見出しを変えたときに必ず食い違う。 */
  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .8rem;
    flex: none;
  }
  td.num { text-align: right; }
}

<table id="tbl">
  <caption>担当者ごとの実績</caption>
  <thead>
    <tr>
      <!-- 並べ替えの状態は aria-sort だけで持つ。値は
           ascending / descending / none の3つ。
           data-key はどの値で並べるかの指定。 -->
      <!-- 表示は name（漢字）、並べ替えは data-sort-by で指定した
           kana（読み）を使う。漢字のまま比べると五十音順にならない。 -->
      <th scope="col" data-key="name" data-sort-by="kana" aria-sort="none">
        <button type="button">担当者</button>
      </th>
      <th scope="col" class="num" data-key="deals" data-type="number" aria-sort="none">
        <button type="button">件数</button>
      </th>
      <th scope="col" class="num" data-key="amount" data-type="number" aria-sort="none">
        <button type="button">金額</button>
      </th>
      <th scope="col" data-key="updated" data-type="date" aria-sort="none">
        <button type="button">最終更新</button>
      </th>
    </tr>
  </thead>
  <tbody id="rows"></tbody>
</table>

<!-- 並べ替えたことを音声でも伝える。画面を見ていない人には
     表が入れ替わったことが分からないため。 -->
<p class="sr-only" id="live" aria-live="polite"
   style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"></p>

table {
  border-collapse: collapse;
  width: 100%;
  font-size: .88rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
caption {
  caption-side: top; text-align: left;
  padding: 0 0 .5rem; font-size: .84rem; line-height: 1.85; color: var(--muted);
}
th, td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; line-height: 1.8; }
thead th { background: #fbfcfe; font-size: .78rem; color: var(--muted); font-weight: 600; padding: 0; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 見出しの中身は button。th 自体に click を付けると
   キーボードで押せず、押せることも伝わらない。 */
thead th button {
  display: flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
  padding: .6rem .8rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}
thead th.num button { justify-content: flex-end; }
thead th button:hover { color: var(--accent); }

/* 矢印は aria-sort から出す。状態をクラスで二重に持つと必ずずれる。
   ::after なので読み上げには乗らない（読み上げには aria-sort が伝わる）。 */
thead th button::after { content: "↕"; opacity: .35; font-size: .8em; }
thead th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--accent); }
thead th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--accent); }
thead th[aria-sort] button { color: var(--accent); }

// 並べ替えの元になるのは「表示用の文字列」ではなく元の値。
// 「¥1,000」を文字列比較すると 200 より小さくなる。
// 日本語の氏名は、漢字のままでは五十音順に並ばない。
// localeCompare は漢字を「読み」ではなく符号位置の照合順で比べるため、
// 青木・石田・上原…（あ→い→う）ではなく別の順序になる。
// 読みは漢字から機械的に求められないので、必ず別の項目として持つ。
// 実務でも「氏名カナ」を入力させるのはこのためで、後付けは効かない。
const DATA = [
  { name: "青木", kana: "あおき", deals: 18, amount: 4820000, updated: "2026-08-28" },
  { name: "石田", kana: "いしだ", deals: 7, amount: 12400000, updated: "2026-07-14" },
  { name: "上原", kana: "うえはら", deals: 24, amount: 3150000, updated: "2026-08-30" },
  { name: "遠藤", kana: "えんどう", deals: 11, amount: 980000, updated: "2026-06-02" },
  { name: "大石", kana: "おおいし", deals: 3, amount: 22500000, updated: "2026-08-19" },
];

const tbl = document.getElementById("tbl");
const rows = document.getElementById("rows");
const live = document.getElementById("live");
const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });

let sortKey = null;
let dir = "ascending";

function render() {
  const list = [...DATA];
  if (sortKey) {
    const th = tbl.querySelector(`th[data-key="${sortKey}"]`);
    const type = th.dataset.type ?? "string";
    const sign = dir === "ascending" ? 1 : -1;
    list.sort((a, b) => {
      // 並べ替えに使う値と、画面に出す値は別でよい。
      // 氏名は表示が漢字、比較は読み（kana）で行う。
      const key = th.dataset.sortBy ?? sortKey;
      const x = a[key], y = b[key];
      // かな同士なら localeCompare で正しく五十音順になる。
      // 濁点や長音の扱いも規則が決まっているので、自分で比較しない。
      if (type === "string") return x.localeCompare(y, "ja") * sign;
      if (type === "date") return (new Date(x) - new Date(y)) * sign;
      return (x - y) * sign;
    });
  }

  rows.innerHTML = "";
  for (const r of list) {
    const tr = document.createElement("tr");
    const th = document.createElement("th");
    th.scope = "row";
    th.textContent = r.name;
    const deals = document.createElement("td");
    deals.className = "num";
    deals.textContent = r.deals;
    const amount = document.createElement("td");
    amount.className = "num";
    amount.textContent = yen.format(r.amount);
    const updated = document.createElement("td");
    // 機械が読む値は time の datetime に、人が読む形は本文に。
    const t = document.createElement("time");
    t.dateTime = r.updated;
    t.textContent = r.updated.replaceAll("-", "/");
    updated.append(t);
    tr.append(th, deals, amount, updated);
    rows.append(tr);
  }
}

tbl.querySelectorAll("thead th[data-key]").forEach((th) => {
  th.querySelector("button").addEventListener("click", () => {
    const key = th.dataset.key;
    // 同じ列を押したら向きだけ反転。別の列なら昇順から始める。
    dir = sortKey === key && dir === "ascending" ? "descending" : "ascending";
    sortKey = key;

    // aria-sort は表の中で1つだけ。残したままにすると
    // 「2つの列で同時に並んでいる」という嘘になる。
    tbl.querySelectorAll("thead th[data-key]").forEach((x) =>
      x.setAttribute("aria-sort", x === th ? dir : "none"),
    );

    render();
    live.textContent =
      `${th.textContent.trim()}の${dir === "ascending" ? "昇順" : "降順"}で並べ替えました`;
  });
});

render();

<table>
  <caption>四半期ごとの売上（2026年度）</caption>
  <thead>
    <tr>
      <th scope="col">部門</th>
      <!-- 単位はセルではなく見出しに書く。各セルに「円」を入れると
           桁の位置が右へずれて、縦の比較ができなくなる。 -->
      <th scope="col" class="num">Q1 <span class="unit">（千円）</span></th>
      <th scope="col" class="num">Q2 <span class="unit">（千円）</span></th>
      <th scope="col" class="num">前期比</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">法人営業</th>
      <td class="num">48,200</td>
      <td class="num">51,940</td>
      <td class="delta" data-dir="up">7.8%<span class="sr-only">増加</span></td>
    </tr>
    <tr>
      <th scope="row">個人向け</th>
      <td class="num">9,140</td>
      <td class="num">8,305</td>
      <td class="delta" data-dir="down">9.1%<span class="sr-only">減少</span></td>
    </tr>
    <tr>
      <th scope="row">保守サポート</th>
      <td class="num">122,600</td>
      <td class="num">122,600</td>
      <td class="delta" data-dir="flat">0.0%<span class="sr-only">増減なし</span></td>
    </tr>
    <tr>
      <th scope="row">その他</th>
      <td class="num">705</td>
      <td class="num">1,488</td>
      <td class="delta" data-dir="up">111.1%<span class="sr-only">増加</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">合計</th>
      <td class="num">180,645</td>
      <td class="num">184,333</td>
      <td class="delta" data-dir="up">2.0%<span class="sr-only">増加</span></td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse; width: 100%; font-size: .88rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
caption {
  caption-side: top; text-align: left;
  padding: 0 0 .5rem; font-size: .84rem; line-height: 1.85; color: var(--muted);
}
th, td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); text-align: left; line-height: 1.8; }
thead th { background: #fbfcfe; font-size: .78rem; color: var(--muted); font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* 数字の列は3点セットで組む。どれか1つでも欠けると比較しづらい。
   1. 右寄せ          … 桁の位置が縦に揃う
   2. tabular-nums    … 文字ごとの幅を等しくして桁をずらさない
   3. 単位は見出しへ  … セルの中に単位があると桁が右へずれる */
.num { text-align: right; font-variant-numeric: tabular-nums; }
thead th .unit { font-weight: 400; opacity: .75; }

/* 増減は色だけで示さない。色覚特性によっては区別が付かないので、
   必ず記号も添える。記号は ::before で出し、
   読み上げ用の語は視覚的に隠したテキストで別に持つ。 */
.delta { font-variant-numeric: tabular-nums; text-align: right; }
.delta[data-dir="up"] { color: var(--up); }
.delta[data-dir="down"] { color: var(--down); }
.delta[data-dir="up"]::before { content: "▲ "; }
.delta[data-dir="down"]::before { content: "▼ "; }
.delta[data-dir="flat"]::before { content: "— "; color: var(--muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 合計行は本文と区別する。tfoot は tbody の後ろに書いても
   ブラウザが最後に描くので、HTML 上の位置に依存しない。 */
tfoot th, tfoot td {
  border-top: 2px solid var(--line);
  background: #fbfcfe;
  font-weight: 600;
}