レスポンシブの表組み②

複数列の表組み

まずは見本のHTMLコード。３列だけどそれ以上でもOK。また項目が左列でも上でも（thead設置でも）問題ない。
tableタグを囲む親のボックスを設置するのがミソ。

/* HTML */
<div class="table-wrap">
  <table>
    <tr>
      <th>項目名１</th>
      <td>内容１-１</td>
      <td>内容１-２</td>
    <tr>
    <tr>
      <th>項目名２</th>
      <td>内容２-１</td>
      <td>内容２-２</td>
    <tr>
    <tr>
      <th>項目名３</th>
      <td>内容３-１</td>
      <td>内容３-２</td>
    <tr>
  </table>
</div>

次にCSSだが、レイアウトが変化する際のブレイクポイントを設定してメディアクエリにて分ける。
前回と同じく「768px」で分岐させることにする。

/* CSS */

table {
  width: 100%;
  table-layout: fixed;
}
th, td {
  border: 1px #ccc solid;
  line-height: 1.6;
  padding: .75em 1em;
}
th { 
  width: 30%; /* 適宜変更 */
  background: #f5f5f5;   
  text-align: left;
}

/* 768pxまでの表示 */
@media (max-width: 768px) {
  .table-wrap {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* iOS用。必要ならば */
  }

  /* １. 明示的に幅を決める */
  table { 
    table-layout: auto; /* 適宜変更 */
    width: 720px; 
  }

  /* ２. セル内で幅を調整 */
  table th,
  table td {
    white-space: pre; /* もしくはnowrap、nowrap */
  }
}

構造は単純で「.table-wrap」を親とし、内包された「table」をその親以上の幅にする。溢れた分は非表示でスクロールで処理する。
内包されたテーブルに関しては１もしくは２のどちらかを設定すれば良いと思う。

DEMO

ユーザーに横スクロールを伝えるための処理

リテラシーの低いユーザーのために「横に動かすんだぜ」的なアイコンを入れるとより親切。

/* HTML */
<div class="table-container">
  <div class="table-wrap">
    <table>
      <tr>
        <th>項目名１</th>
        <td>内容１-１</td>
        <td>内容１-２</td>
      <tr>
      <tr>
        <th>項目名２</th>
        <td>内容２-１</td>
        <td>内容２-２</td>
      <tr>
      <tr>
        <th>項目名３</th>
        <td>内容３-１</td>
        <td>内容３-２</td>
      <tr>
    </table>
  </div>
</div>

「.table-wrap」を囲むボックス「.table-container」を設置。「.table-container」の疑似要素でアイコンを設置しようと思う。

ここで「.table-wrap」の疑似要素でやっても同じじゃない？と思うのだが、横に動かした際設置した「アイコン」まで移動してしまうためさらに追加している。
今回アイコンはおなじみの「Font Awesome」を有り難く使用させてもらい、ブレイクポイント内に以下のコードを追加。

Font Awesome

/* CSS */
@media (max-width: 768px) {
 .table-container { 
    position: relative; 
    padding: 30px 0; /* アイコンを入れるスペース */
  }
  .table-container::before,
  .table-container::after {
    display: block;
    width: 32px;
    height: 24px;
    color: #000;
    font-size: 24px;
    font-family: 'FontAwesome';
    content: "\f07e";
    position: absolute;
    z-index: 2;
  }
  .table-container::before {
    top: 0;
    left: 50%;
  }
  .table-container::after {
    bottom: 0;
    left: 50%;
  }
}

アイコンは画像でも良いだろう。またスクロール表示も工夫すると良いかも。

DEMO