スマホ対応の見やすい表を作りたい！　tableのCSS設定

PR　当ページのリンクには広告が含まれています。

よく使うtableのCSSデザイン

サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。
例にあげたのは、全部tdの場合です。thが入ると変わってくるものもありますのでよくご確認ください。

<table class="outline">
<tbody>
<tr>
<th>社名</th>
<td>〇〇株式会社</td>
</tr>
<tr>
<th>所在地</th>
<td>〒000-0000　埼玉県〇〇〇〇〇〇</td>
</tr>
…
</tbody>
</table>

tableの間隔を開けたい

例）
.table {
    border-collapse: separate;
    border-spacing: 6px 10px;/*6px…横方向の間隔 10px…縦方向の間隔*/
}

2列目だけスタイルを付けたい

tableの列は縦方向、行は横方向のまとまりです。類似クラスのnth-of-typeやnth-childを使用します。

例）
tr td:nth-of-type(2) { background:カラーを指定; }

tr td:nth-child(2){ background:カラーを指定; }
（

1行おきにスタイルを付けたい

（奇数）
tr:nth-child(2n+1) { background:カラーを指定; }
tr:nth-child(odd) { background:カラーを指定; }

（偶数）
tr:nth-child(2n) { background:カラーを指定; }
tr:nth-child(even)  { background:カラーを指定;}

3行目の2列目だけスタイルを付けたい

tr:nth-child(3) td:nth-child(2) { background:カラーを指定; }

テーブルの幅を統一させたい

table { table-layout: fixed; }

セル内の位置を指定したい

td{vertical-align:top;}　…上揃え
td{vertical-align:middle;}　…上下センター揃え
td{vertical-align:bottom;}　…下揃え
td{text-align:left;}　…上揃え
td{text-align:center}　…左右センター揃え
td{text-align:right}　…右揃え

よく使うtableのレスポンシブデザイン

表を縦に並べる

スマホで見ると、幅が狭いので表が見づらくなることがありますね。見出しセルとデータセルが一つずつの場合にはこちらがおすすめです。見出しセルとデータセルを縦に並ぶように設定します。

例）
@media screen and (max-width: 650px) {
table th, table td { display:block; }
}

スクロールさせたい

こちらは、横幅のあるテーブルを横にスクロールさせる例です。

まずhtmlのtableコードを囲み、クラスをつけます。

...

cssでスクロールにする設定をします。こちらのコードはスマホだけにスクロールをつける例です。
スタイルの下ふたつは、スマホでのスクロールを滑らかにしてくれます。

例）
@media screen and (max-width: 767px) {
.scroll  { 
overflow-x: auto;  
overflow-scrolling:touch; 
-webkit-overflow-scrolling:touch;}
}

会社概要などの表、似た形になりがちでデザインのバリエーションに悩みます。みなさんはどうですか？
より分かりやすく、サイトにマッチしたデザインを目指していきたいです！！