とりあえず入るように収める

テーブルの幅を100%に、テーブルレイアウトをFixed(固定)にする事でとりあえず枠は収まるようになります。まだこの段階では、文字がはみ出してしまうので、word-break: break-word;を指定してあげれば、長い単語の途中でも改行されるようになります。

html

<table class="FixTable">
  <thead>
    <tr>
      <th>総売り上げ</th>
      <td colspan="4">125000円</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>商品名</th>
      <td>バナナ</td>
      <td>リンゴ</td>
      <td>みかん</td>
      <td>オレンジ</td>
    </tr>
    <tr>
      <th>単価</th>
      <td>100円</td>
      <td>200円</td>
      <td>150円</td>
      <td>200円</td>
    </tr>
    <tr>
      <th>販売数</th>
      <td>1000個</td>
      <td>1500個</td>
      <td>3000個</td>
      <td>2000個</td>
    </tr>
    <tr>
      <th>売り上げ</th>
      <td>100,000円</td>
      <td>300,000円</td>
      <td>450,000円</td>
      <td>400,000円</td>
    </tr>
  </tbody>
</table>

css

@media only screen and (max-width:400px) {
  .FixTable {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
  }
}

スクロールバーを追加する

複雑なテーブルなどでは、無理やり画面内に収めてしまうと見づらくなってしまいます。そこでテーブルを横にスクロールできるようにしてあげれば見やすくなります。

ですが、ただ横にスクロールするように設定すると、ページ全体も横にスクロールするので、DIV要素などの親要素を追加し、その親要素の横にはみ出した分をスクロールするように設定してあげます。

html

<div class="scrollTable">
  <table>
    <thead>
      <tr>
        <th>総売り上げ</th>
        <td colspan="4">125000円</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>商品名</th>
        <td>バナナ</td>
        <td>リンゴ</td>
        <td>みかん</td>
        <td>オレンジ</td>
      </tr>
      <tr>
        <th>単価</th>
        <td>100円</td>
        <td>200円</td>
        <td>150円</td>
        <td>200円</td>
      </tr>
      <tr>
        <th>販売数</th>
        <td>1000個</td>
        <td>1500個</td>
        <td>3000個</td>
        <td>2000個</td>
      </tr>
      <tr>
        <th>売り上げ</th>
        <td>100,000円</td>
        <td>300,000円</td>
        <td>450,000円</td>
        <td>400,000円</td>
      </tr>
    </tbody>
  </table>
</div>

css

@media only screen and (max-width:400px) {
  .scrollTable {
    overflow: auto;
    margin-bottom:20px;
  }
  .scrollTable table{
    width:100%;
    margin-bottom:0;
  }
  .scrollTable::-webkit-scrollbar{
    height: 10px;
  }
  .scrollTable::-webkit-scrollbar-track{
    background: #EEE;
  }
  .scrollTable::-webkit-scrollbar-thumb {
    background: #999;
  }
}

CSSのDisplayをブロックに代える

CSSにてDisplayプロパティを変更する事で、横に並んでいたセルを縦の並びに変更させます。会社紹介や入力フォームによく見られる2列で構成されたテーブルの変換に役に立てそうです。

html

<table class="blockTable">
  <thead>
    <tr>
      <th>CSS</th>
      <td>スタイルシート言語(英語: style sheet language)とは、構造化文書の見た目を記述するコンピュータ言語。</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>LESS</th>
      <td>LESS(Leaner CSS)は、Alexis Sellierが設計した動的スタイルシート言語である。</td>
    </tr>
  </tbody>
</table>

css

@media only screen and (max-width:400px) {
  .FixTable {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
  }
}

ヘッダを固定してスクロールさせる

テーブルをスクロールしても途中で何の情報かがわからなくなる事を防ぐためにも、ヘッダを固定したい時ってありますよね。CSSでDisplayの値を変更する事でヘッダを固定する事が可能となります。

手順は(1):table, thead, tbody, th, td要素をそれぞれブロック要素に変更 (2):tr要素をインラインブロック要素へ変更 (3):theadを左寄せに変更 (4):tbodyのオーバーフローをオートに、改行をさせない という流れです。後は細かい調整を行ってください。

html

<table class="scrollTableBody">
  <thead>
    <tr>
      <th>商品名</th>
      <th>バナナ</th>
      <th>リンゴ</th>
      <th>みかん</th>
      <th>オレンジ</th>
      <th>マンゴー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>単価</td>
      <td>100円</td>
      <td>200円</td>
      <td>150円</td>
      <td>200円</td>
      <td>300円</td>
    </tr>
    <tr>
      <td>販売数</td>
      <td>1000個</td>
      <td>1500個</td>
      <td>3000個</td>
      <td>2000個</td>
      <td>4000個</td>
    </tr>
    <tr>
      <td>売り上げ</td>
      <td>100,000円</td>
      <td>300,000円</td>
      <td>450,000円</td>
      <td>400,000円</td>
      <td>1200,000円</td>
    </tr>
    <tr>
      <td>WEB販売</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
    </tr>
    <tr>
      <td>コンビニ販売</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
    </tr>
  </tbody>
</table>

css

@media only screen and (max-width:400px) {
  .scrollTableBody{
    display:block;
  }
  .scrollTableBody thead{
    display:block;
    float:left;
  }
  .scrollTableBody tbody{
    display: block; 
    width: auto; 
    overflow-x: auto; 
    white-space: nowrap;
  }
  .scrollTableBody tr{
    display:inline-block;
  }
  .scrollTableBody td,
  .scrollTableBody th{
    display:block;
    padding:0;
  }
}

リスト形式へ変更する

テーブルがだめならリスト形式へ変更する。ですが、リストが長いとわかりにくくなるかも。

html

<table class="listTable1">
  <thead>
    <tr>
      <th>商品名</th>
      <th>バナナ</th>
      <th>リンゴ</th>
      <th>みかん</th>
      <th>オレンジ</th>
      <th>マンゴー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>単価</td>
      <td>100円</td>
      <td>200円</td>
      <td>150円</td>
      <td>200円</td>
      <td>300円</td>
    </tr>
    <tr>
      <td>販売数</td>
      <td>1000個</td>
      <td>1500個</td>
      <td>3000個</td>
      <td>2000個</td>
      <td>4000個</td>
    </tr>
    <tr>
      <td>売り上げ</td>
      <td>100,000円</td>
      <td>300,000円</td>
      <td>450,000円</td>
      <td>400,000円</td>
      <td>1200,000円</td>
    </tr>
    <tr>
      <td>WEB販売</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
    </tr>
    <tr>
      <td>コンビニ販売</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
      <td>50%</td>
    </tr>
  </tbody>
</table>

css

    @media only screen and (max-width:400px) {
      .listTable1 thead tr {
        border-bottom:dotted 1px #FFF;
        background-color:#9397eb;
	      color:#FFF;
      }
      .listTable1 tbody tr {
	      border-bottom:dotted 1px #BEC0F3;
      }
      .listTable1 td,
      .listTable1 th{
        text-align:left;
        display:list-item;
        padding:0;
        margin-left:1.5em;
        background-color:transparent;
        border:none;
      }
    }

JavaScriptで何とかする

リスト形式では長くなると途中で何の情報化わからなくなりますよね。そこで題目を各項目に追加してあげれば、わかりにくくなることもないと思うのですが、CSSの疑似要素で指定する方法があります。

しかし、ヘッダの情報が変わるたびにそれを指定すると、とてつもない労力が必要になります。そこで動的にと考えると、Javascriptで追加してしまうのが手っ取り早いかもしれませんね。JQueryなんかを使えばこのような変換の処理が用意されているかもしれませんが、私は暇なので大体自作しています。

JavaScript

function AddAliasTHElement() {
    var target = document.getElementById("listTable2");
    var thead = target.getElementsByTagName("THEAD")[0];
    var labels = new Array();
    for (var i = 0; i < thead.getElementsByTagName("TH").length; i++) {
      var item = thead.getElementsByTagName("TH")[i];
      labels[i] = item.innerHTML;
    }
    var tbody = target.getElementsByTagName("TBODY")[0];
    var trItems = tbody.getElementsByTagName("TR");
    for (var r = 0; r < trItems.length; r++) {
      for (var c = 0; c < trItems[r].children.length; c++) {
        var cellItem = trItems[r].children[c];
        var label = document.createElement("span");
        label.classList.add("aliasTh");
        label.innerHTML = "[" + labels[c] + "]";
        cellItem.insertBefore(label, cellItem.firstChild);
      }
    }
  }

css

    .listTable2 .aliasTh{
      display:none;
    }

        @media only screen and (max-width:400px) {
      .listTable2 thead{
        display:none;
      }
      .listTable2 tbody tr {
	      border-bottom:dotted 1px #BEC0F3;
      }
      .listTable2 td,
      .listTable2 th{
        text-align:left;
        display:block;
        padding:0;
        margin-left:0.5em;
        background-color:transparent;
        border:none;
      }
      .listTable2 .aliasTh{
        display:block;
        font-size:10px;
      }
    }

HTMLはリスト形式へ変更するとほぼ同じですが、CSSクラス名を"listTable2"へ変更し、それと同じIDを設定しています。また、BODY要素のOnloadイベントに"AddAliasTHElement()"ファンクションを指定しています。