Table 1 — テーブル 1 — 基本スタイル

/* テーブル（基本スタイル）— style.css */
:root {
  --tbl-header-bg:  #2B7FE8; /* ヘッダー背景 */
  --tbl-header-txt: #ffffff; /* ヘッダー文字 */
  --tbl-stripe-bg:  #F4F7FF; /* 偶数行の背景 */
  --tbl-hover-bg:   #EBF2FF; /* ホバー時の背景 */
  --tbl-border:     #E5E9F2; /* 行の区切り線 */
  --tbl-txt:        #1A2332; /* 本文テキスト */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  background: #f8f9fa;
}

/* 横スクロール可能なラッパー */
.tbl-scroll {
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  background: #fff;
  white-space: nowrap;
}

/* ヘッダー行 */
.tbl th {
  background: var(--tbl-header-bg);
  color: var(--tbl-header-txt);
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
}

/* データ行 */
.tbl td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--tbl-border);
  color: var(--tbl-txt);
}

/* 最終行の下ボーダーを消す */
.tbl tbody tr:last-child td { border-bottom: none; }

/* ストライプ（偶数行） */
.tbl tbody tr:nth-child(even) td {
  background: var(--tbl-stripe-bg);
}

/* ホバー */
.tbl tbody tr:hover td {
  background: var(--tbl-hover-bg);
  transition: background 0.1s;
}

/* 状態バッジ */
.tbl-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

.tbl-status[data-status="在籍"] { background: #D1FAE5; color: #065F46; }
.tbl-status[data-status="休職"] { background: #FEF3C7; color: #92400E; }
.tbl-status[data-status="退職"] { background: #F3F4F6; color: #6B7280; }

@media (max-width: 600px) {
  body { padding: 12px; }
  .tbl th, .tbl td { padding: 8px 12px; }
}

// JSONファイルを読み込んでテーブルを描画する
fetch('./data/data.json')
  .then(function (res) {
    if (!res.ok) { throw new Error('HTTP ' + res.status); }
    return res.json();
  })
  .then(function (data) { renderTable(data); })
  .catch(function (err) {
    console.error('データ読み込みエラー:', err);
    var wrap = document.getElementById('js-wrap');
    var msg = document.createElement('p');
    msg.style.cssText = 'color:#9B1C1C; font-size:14px;';
    msg.textContent = 'データを読み込めませんでした。';
    wrap.appendChild(msg);
  });

function renderTable(data) {
  var theadRow = document.getElementById('js-thead-row');
  var tbody    = document.getElementById('js-tbody');

  // ヘッダー行を生成する
  data.columns.forEach(function (col) {
    var th = document.createElement('th');
    th.textContent = col.label;
    if (col.width) { th.style.width = col.width; }
    theadRow.appendChild(th);
  });

  // データ行を生成する
  data.rows.forEach(function (row) {
    var tr = document.createElement('tr');
    data.columns.forEach(function (col) {
      var td = document.createElement('td');
      var val = row[col.key];
      if (col.key === 'status') {
        // 状態列はピル型バッジで表示する
        var span = document.createElement('span');
        span.className = 'tbl-status';
        span.setAttribute('data-status', val != null ? val : '');
        span.textContent = val != null ? val : '';
        td.appendChild(span);
      } else {
        td.textContent = val != null ? val : '';
      }
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });
}

{
  "columns": [
    { "key": "id",         "label": "ID",   "width": "56px"  },
    { "key": "name",       "label": "氏名", "width": "140px" },
    { "key": "department", "label": "部署", "width": "110px" },
    { "key": "role",       "label": "役職", "width": "150px" },
    { "key": "status",     "label": "状態", "width": "80px"  }
  ],
  "rows": [
    { "id": 1, "name": "田中 一郎", "department": "開発部",           "role": "リードエンジニア",       "status": "在籍" },
    { "id": 2, "name": "鈴木 花子", "department": "デザイン部",       "role": "UIデザイナー",           "status": "在籍" },
    { "id": 3, "name": "佐藤 次郎", "department": "開発部",           "role": "バックエンドエンジニア", "status": "在籍" },
    { "id": 4, "name": "山田 三枝", "department": "営業部",           "role": "セールスマネージャー",   "status": "在籍" },
    { "id": 5, "name": "伊藤 健太", "department": "開発部",           "role": "エンジニア",             "status": "休職" },
    { "id": 6, "name": "渡辺 美咲", "department": "マーケティング部", "role": "コンテンツディレクター", "status": "在籍" },
    { "id": 7, "name": "中村 剛",   "department": "インフラ部",       "role": "インフラエンジニア",     "status": "在籍" },
    { "id": 8, "name": "小林 奈々", "department": "人事部",           "role": "HRマネージャー",         "status": "退職" }
  ]
}