プログラミング

スマホでも見えやすいレスポンシブ対応のテーブルにする

テーブル（表組み）をつくるときに、表が横長だと、画面幅の狭いスマホではかなり見づらくなってしまいます。

最近ではスマホを使う人が多くなったので、モバイルサイトの最適化は欠かせません。

下の表はPCでは普通ですが、スマホで見ると見にくいのがわかると思います。

See the Pen table-responsive by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<thead>
　　　<tr>
　　　　<th>Name</th>
　　　　<th>Age</th>
　　　　<th>Gender</th>
　　　　<th>Country</th>
　　　　<th>E-mail</th>
　　　　<th>Tel</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td>Taro</td>
　　　　<td>21</td>
　　　　<td>Male</td>
　　　　<td>Japan</td>
　　　　<td>taro@yahoo.co.jp</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>Anne</td>
　　　　<td>18</td>
　　　　<td>Female</td>
　　　　<td>France</td>
　　　　<td>anne@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>John</td>
　　　　<td>26</td>
　　　　<td>Male</td>
　　　　<td>Australia</td>
　　　　<td>John@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　</tbody>
　</table>
</div>
CSS
.wrap {
　width: 100%;
}
table {
　width: 100%;
　border-collapse: collapse;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
}
td {
　background: #ECEEF1;
　padding: 10px 15px;
　font-size: 0.8em;
　border: 1px solid #ddd;
}

レスポンシブ対応にしてみる

まず、画面幅で可変するようなレスポンシブ対応にしてみます。

iPhone5とかだと画面幅は320pxなので、その幅に表が収まるように「word-break:break-all;」を指定すると次のようになります。

See the Pen table-responsive2 by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<thead>
　　　<tr>
　　　　<th>Name</th>
　　　　<th>Age</th>
　　　　<th>Gender</th>
　　　　<th>Country</th>
　　　　<th>E-mail</th>
　　　　<th>Tel</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td>Taro</td>
　　　　<td>21</td>
　　　　<td>Male</td>
　　　　<td>Japan</td>
　　　　<td>taro@yahoo.co.jp</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>Anne</td>
　　　　<td>18</td>
　　　　<td>Female</td>
　　　　<td>France</td>
　　　　<td>anne@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>John</td>
　　　　<td>26</td>
　　　　<td>Male</td>
　　　　<td>Australia</td>
　　　　<td>John@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　</tbody>
　</table>
</div>
CSS
.wrap {
　width: 320px;
}
table {
　width: 100%;
　border-collapse: collapse;
　word-break: break-all;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
}
td {
　background: #ECEEF1;
　padding: 10px 15px;
　font-size: 0.8em;
　border: 1px solid #ddd;
}

フォントのサイズを小さくすればうまく収まる場合もありますが、それも限界があります。

縦並びの表が見やすい

画面幅の狭いスマホでは横並びよりも縦並びの方が相性がいいので、少しデザインを変えて縦並びにしてみます。

See the Pen table-responsive3 by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<tr>
　　　<td class=”name”>Taro</td>
　　　<td>【Age】21</td>
　　　<td>【Gender】Male</td>
　　　<td>【Country】Japan</td>
　　　<td>【E-mail】taro@yahoo.co.jp</td>
　　　<td>【Tel】×××-×××-×××</td>
　　</tr>
　　<tr>
　　　<td class=”name”>Anne</td>
　　　<td>【Age】18</td>
　　　<td>【Gender】Female</td>
　　　<td>【Country】France</td>
　　　<td>【E-mail】anne@gmail.com</td>
　　　<td>【Tel】×××-×××-×××</td>
　　</tr>
　　<tr>
　　　<td class=”name”>John</td>
　　　<td>【Age】26</td>
　　　<td>【Gender】Male</td>
　　　<td>【Country】Australia</td>
　　　<td>【E-mail】John@gmail.com</td>
　　　<td>【Tel】×××-×××-×××</td>
　　</tr>
　</table>
</div>
CSS
.wrap {
　width: 320px;
}
table {
　width: 100%;
　border-collapse: collapse;
　word-break:break-all;
}
tr {
　display: block;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
}
td {
　background: #ECEEF1;
　padding: 10px 15px;
　font-size: 0.8em;
　border: 1px solid #ddd;
}
th, td {
　display: list-item;
}
.name {
　background: #0E7AC4;
　color: #fff;
　padding-left: 23px;
}

一番上の行のテーブルヘッダー部分は削除し、名前ごとに表の内容を整えています。

tr要素に「display: block;」を、th・td要素に「display: list-item;」を指定することで縦並びになります。

また、テーブルヘッダー部分を消した分、各項目に【Age】【Gender】【Country】【E-mail】【Tel】といった補足情報を追記しておくとわかりやすいです。

リスト形式で表示

リストアイテムにしているので、「list-style:disc inside;」を追記して、リスト形式っぽくするのもいいかもしれません。

次の例では、背景や枠線も削除しています。

See the Pen table-responsive4 by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<tr>
　　　<td class=”name”>Taro</td>
　　　<td>【Age】21</td>
　　　<td>【Gender】Male</td>
　　　<td>【Country】Japan</td>
　　　<td>【E-mail】taro@yahoo.co.jp</td>
　　　<td>【Tel】×××-×××-×××</td>
　　</tr>
　　<tr>
　　　<td class=”name”>Anne</td>
　　　<td>【Age】18</td>
　　　<td>【Gender】Female</td>
　　　<td>【Country】France</td>
　　　<td>【E-mail】anne@gmail.com</td>
　　　<td>【Tel】×××-×××-×××</td>
　　</tr>
　　<tr>
　　　<td class=”name”>John</td>
　　　<td>【Age】26</td>
　　　<td>【Gender】Male</td>
　　　<td>【Country】Australia</td>
　　　<td>【E-mail】John@gmail.com</td>
　　　<td>【Tel】×××-×××-×××</td>
　　</tr>
　</table>
</div>
CSS
.wrap {
　width: 320px;
}
table {
　width: 100%;
　border-collapse: collapse;
　word-break:break-all;
}
tr {
　display: block;
　border: 1px solid #ddd;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
}
td {
　padding: 10px 15px;
　font-size: 0.8em;
　list-style:disc inside;
　padding-left: 25px;
}
th, td {
　display: list-item;
}
.name {
　background: #0E7AC4;
　color: #fff;
　padding-left: 23px;
　list-style: none;
}

横スクロールできるようにする

横並びのまま表示したい場合は、横スクロールするようにした方がいいと思います。

table要素の親要素であるdiv要素に「overflow: scroll;」を指定すると、要素からはみ出た分は横スクロールがつきます。

また、table要素に「white-space: nowrap;」も指定しています。

See the Pen table-responsive5 by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<thead>
　　　<tr>
　　　　<th>Name</th>
　　　　<th>Age</th>
　　　　<th>Gender</th>
　　　　<th>Country</th>
　　　　<th>E-mail</th>
　　　　<th>Tel</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td>Taro</td>
　　　　<td>21</td>
　　　　<td>Male</td>
　　　　<td>Japan</td>
　　　　<td>taro@yahoo.co.jp</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>Anne</td>
　　　　<td>18</td>
　　　　<td>Female</td>
　　　　<td>France</td>
　　　　<td>anne@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>John</td>
　　　　<td>26</td>
　　　　<td>Male</td>
　　　　<td>Australia</td>
　　　　<td>John@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　</tbody>
　</table>
</div>
CSS
.wrap {
　width: 320px;
　overflow: scroll;
　-webkit-overflow-scrolling: touch;
}
table {
　width: 100%;
　border-collapse: collapse;
　white-space: nowrap;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
}
td {
　background: #ECEEF1;
　padding: 10px 15px;
　font-size: 0.8em;
　border: 1px solid #ddd;
}

スマホでのスクロールをなめらかにするために、「-webkit-overflow-scrolling: touch;」も記述しています。

上の見出しを横に切り替える

一番上の行の見出しを左横の列に切り替えるという方法もあります。

See the Pen table-responsive6 by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<thead>
　　　<tr>
　　　　<th>Name</th>
　　　　<th>Age</th>
　　　　<th>Gender</th>
　　　　<th>Country</th>
　　　　<th>E-mail</th>
　　　　<th>Tel</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td>Taro</td>
　　　　<td>21</td>
　　　　<td>Male</td>
　　　　<td>Japan</td>
　　　　<td>taro@yahoo.co.jp</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>Anne</td>
　　　　<td>18</td>
　　　　<td>Female</td>
　　　　<td>France</td>
　　　　<td>anne@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>John</td>
　　　　<td>26</td>
　　　　<td>Male</td>
　　　　<td>Australia</td>
　　　　<td>John@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　</tbody>
　</table>
</div>
CSS
.wrap {
　width: 320px;
　overflow: scroll;
　-webkit-overflow-scrolling: touch;
}
table {
　width: 100%;
　border-collapse: collapse;
　display: block;
　width: 100%;
　font-size: 0.8em;
}
table thead {
　display: block;
　float: left;
}
table tbody {
　display: block;
　width: auto;
　white-space: nowrap;
}
table thead tr {
　display: block;
}
table tbody tr {
　display: inline-block;
　margin-right: -4px;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
　display: block;
}
td {
　background: #ECEEF1;
　padding: 10px 15px;
　border: 1px solid #ddd;
　display: block;
}

thead要素に「float: left;」を指定して左に持ってきます。

また、tbody要素に「white-space: nowrap;」を指定します。

tbody要素の子要素であるtr要素に「display: inline-block;」を指定し、他の要素には「display: block;」を指定しています。

左の1列を固定して横スクロール

tbody要素に「overflow-x: auto;」を指定することで、左の1列を固定して他の要素は横スクロールできるようになります。

See the Pen table-responsive7 by KUBO (@KUBOGEN) on CodePen.

HTML
<div class=”wrap”>
　<table>
　　<thead>
　　　<tr>
　　　　<th>Name</th>
　　　　<th>Age</th>
　　　　<th>Gender</th>
　　　　<th>Country</th>
　　　　<th>E-mail</th>
　　　　<th>Tel</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td>Taro</td>
　　　　<td>21</td>
　　　　<td>Male</td>
　　　　<td>Japan</td>
　　　　<td>taro@yahoo.co.jp</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>Anne</td>
　　　　<td>18</td>
　　　　<td>Female</td>
　　　　<td>France</td>
　　　　<td>anne@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　　<tr>
　　　　<td>John</td>
　　　　<td>26</td>
　　　　<td>Male</td>
　　　　<td>Australia</td>
　　　　<td>John@gmail.com</td>
　　　　<td>×××-×××-×××</td>
　　　</tr>
　　</tbody>
　</table>
</div>
CSS
.wrap {
　width: 320px;
　overflow: scroll;
　-webkit-overflow-scrolling: touch;
}
table {
　width: 100%;
　border-collapse: collapse;
　display: block;
　width: 100%;
　font-size: 0.8em;
}
table thead {
　display: block;
　float: left;
}
table tbody {
　display: block;
　width: auto;
　overflow-x: auto;
　white-space: nowrap;
}
table thead tr {
　display: block;
}
table tbody tr {
　display: inline-block;
　margin-right: -4px;
}
th {
　background: #0E7AC4;
　color: #fff;
　font-weight: normal;
　padding: 10px 15px;
　text-align: left;
　border: 1px solid #ddd;
　display: block;
}
td {
　background: #ECEEF1;
　padding: 10px 15px;
　border: 1px solid #ddd;
　display: block;
}

まとめ

横長の表をスマホで見やすくするのは、色々と工夫が必要です。

単に収まるようにレスポンシブ対応させても、文字が多いとかなり読みにくくなるからです。

できれば縦並びになるようにデザインできればわかりやすいと思いますが、それが難しい場合は、横スクロールできるようにしておけばいいと思います。

Leave a Comment