レスポンシブデザインで困るのがテーブル(table)ですよね。
どう処理しようか迷うところです。
今回はテーブル(table)を大きく3つの種類に分け、それぞれの対処法を紹介します。
まずはどうなるかデモで確認してみてください。
※画面を640px以下にしてみてください。
1.単純なtableの場合
単純なっていうのはthが左列でtdも1列のみと言うことです。↓
<table class="first">
<tr>
<th>ABC</th>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius mauris turpis, a facilisis tellus dapibus at. Vestibulum porttitor convallis orci, lacinia vestibulum sapien suscipit quis. Mauris pulvinar a magna quis dapibus. Suspendisse vehicula placerat tincidunt. Aliquam sem libero, blandit at condimentum sed, ornare at justo. Sed eleifend sollicitudin diam, quis bibendum neque eleifend id. Aliquam erat volutpat. Integer consequat enim id nunc cursus tincidunt. In eu nisi a sapien consectetur laoreet a ut tortor. Curabitur a purus urna. Etiam consequat eleifend est a venenatis. Donec suscipit lectus ac eros lobortis, condimentum hendrerit turpis sollicitudin. Fusce feugiat magna ipsum, ut gravida odio imperdiet vestibulum. Cras eu ullamcorper nulla.</td>
</tr>
<tr>
<th>DEF</th>
<td>Nam in accumsan purus. Sed pellentesque non libero ac feugiat. In ultrices et lorem sit amet maximus. In nisl risus, ultrices lobortis diam nec, convallis imperdiet lectus. Nullam mollis augue in ante malesuada, et mattis sem feugiat. Nullam rhoncus convallis libero in congue. Praesent quis odio dolor. Donec viverra urna a enim pretium, ut lobortis nisi pellentesque. Duis quis consequat justo. Sed eu magna non ante accumsan fringilla. Fusce id scelerisque leo. Cras ac varius risus.</td>
</tr>
</table>これに対してCSSは↓
table.first tr th {
border: 1px solid #777;
padding: 1em;
background: #111;
color: #fff;
}
table.first tr td {
border: 1px solid #777;
padding: 1em;
}
@media only screen and (max-width: 640px) {
table.first tr th, table.first tr td {
display: block;
border: none;
}
}thとtdの処理をした後のメディアクエリでthとtdをdisplay:block;し、面倒なのでborderはなくしただけです。
こういう単純なテーブル(table)だと簡単に処理できますね。
2.thが横並びで横に長い場合
これはちょっと骨が折れます。
コピペで機能するようにコードは書いてあります。
まずはテーブル(table)
<table class="second">
<thead>
<tr>
<th> </th>
<th>ABC</th>
<th>DEF</th>
<th>HIJ</th>
<th>KLM</th>
<th>NOP</th>
<th>QRS</th>
<th>TUV</th>
</tr>
</thead>
<tbody>
<tr>
<td>td01</td>
<td>td01-01</td>
<td>td01-02</td>
<td>td01-03</td>
<td>td01-04</td>
<td>td01-05</td>
<td>td01-06</td>
<td>td01-07</td>
</tr>
<tr>
<td>td02</td>
<td>td02-01</td>
<td>td02-02</td>
<td>td02-03</td>
<td>td02-04</td>
<td>td02-05</td>
<td>td02-06</td>
<td>td02-07</td>
</tr>
<tr>
<td>td03</td>
<td>td03-01</td>
<td>td03-02</td>
<td>td03-03</td>
<td>td03-04</td>
<td>td03-05</td>
<td>td03-06</td>
<td>td03-07</td>
</tr>
<tr>
<td>td04</td>
<td>td04-01</td>
<td>td04-02</td>
<td>td04-03</td>
<td>td04-04</td>
<td>td04-05</td>
<td>td04-06</td>
<td>td04-07</td>
</tr>
</tbody>
</table>複雑でもなんでもないテーブル(table)ですが、スマホの狭い画面に横長なのがネックです。
これに対してcssは↓
table.second {
width: 100%;
}
@media only screen and (max-width: 640px) {
table.second {
display: block;
position: relative;
letter-spacing: -0.4em;
}
}
table.second thead tr th {
border: 1px solid #777;
padding: 1em;
background: #111;
color: #fff;
}
@media only screen and (max-width: 640px) {
table.second thead {
display: block;
float: left;
}
table.second thead tr {
display: block;
}
table.second thead tr th {
display: block;
border-left: 0;
border-bottom: 0;
letter-spacing: normal;
}
table.second thead tr th:last-child {
border-bottom: 1px solid #777;
}
}
table.second tbody tr td {
border: 1px solid #777;
padding: 1em;
text-align: center;
}
@media only screen and (max-width: 640px) {
table.second tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
table.second tbody tr {
display: inline-block;
vertical-align: top;
border-right: 1px solid #777;
}
table.second tbody tr td {
display: block;
border-left: 0;
border-right: 0;
border-bottom: 0;
letter-spacing: normal;
}
table.second tbody tr td:last-child {
border-bottom: 1px solid #777;
}
}theadはdisplay:block;してfloat:left;しているだけなのに対してtbodyはoverflow-x: auto;でスクロールバーを自動で出し、white-space: nowrap;で下にずれるのを防いでます。
border関係がちょっと面倒で、th、tdのborderを消し、trで追加しているところがポイントです。
最初のメディアクエリにletter-spacing: -0.4em;とありますが、後のtrに対してdisplay: inline-block;でtrに隙間が開くためです。
※詳しくは「display:inline-blockでできる隙間をなくす方法」もご覧ください。
コピペで使用してくださる場合はテーブルｎ(table)にthead、tbodyを忘れずに、テーブル(table)のclass名は適当に変えていただければ問題なく動くと思います。
3.thが縦並びで横に長い場合
これもテーブル(table)としては複雑でもなんでもないんですけど、スマホ画面に対して横長すぎますね。
<table class="third">
<tr>
<th>ABC</th>
<td>td01-01</td>
<td>td01-02</td>
<td>td01-03</td>
<td>td01-04</td>
<td>td01-05</td>
</tr>
<tr>
<th>DEF</th>
<td>td02-01</td>
<td>td02-02</td>
<td>td02-03</td>
<td>td02-04</td>
<td>td02-05</td>
</tr>
</table>これは対してcssは↓
table.third {
width: 100%;
}
@media only screen and (max-width: 640px) {
table.third tr {
display: block;
margin-bottom: 2em;
}
}
table.third tr th {
padding: 1em;
border: 1px solid #777;
background: #111;
color: #fff;
box-sizing: border-box;
}
@media only screen and (max-width: 640px) {
table.third tr th {
display: block;
width: 100%;
text-align: left;
}
}
table.third tr td {
padding: 1em;
border: 1px solid #777;
}
@media only screen and (max-width: 640px) {
table.third tr td {
display: list-item;
border: 0;
margin-left: 2.5em;
}
}trをすべてdisplay: block;して縦1列にしています。
それからtdのみdisplay: list-item;にしてリスト表示に変更しています。
後は行頭文字やmarginを指定してあげればOKです。
まとめ
他にも色々な方法があるみたいですが、とりあえずこの3つの方法を知っていればなんとかなるかなって方法でした。
面倒なのがrowspanやcolspanしてるテーブルですね。
