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

2021-08-17

よく使う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…縦方向の間隔*/
}
リンゴ apple 林檎
メロン melon 舐瓜
レモン lemon 檸檬
イチゴ Strawberry

 

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

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

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

tr td:nth-child(2){ background:カラーを指定; }
(
リンゴ apple 林檎
メロン melon 舐瓜
レモン lemon 檸檬
イチゴ Strawberry

 

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

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

(偶数)
tr:nth-child(2n) { background:カラーを指定; }
tr:nth-child(even)  { background:カラーを指定;}
リンゴ apple 林檎
メロン melon 舐瓜
レモン lemon 檸檬
イチゴ Strawberry

 

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

tr:nth-child(3) td:nth-child(2) { background:カラーを指定; }
リンゴ apple 林檎
メロン melon 舐瓜
レモン lemon 檸檬
イチゴ Strawberry

 

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

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のレスポンシブデザイン

表を縦に並べる

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

社名 〇〇株式会社
所在地 〒000-0000 埼玉県〇〇〇〇〇〇
電話番号 000-0000-0000

こちらはパソコン表示

社名 〇〇株式会社
所在地 〒000-0000 埼玉県〇〇〇〇〇〇
電話番号 000-0000-0000

こちらはスマホ表示

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

 

スクロールさせたい

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

リンゴ apple 林檎 リンゴ酸、クエン酸、食物繊維、ポリフェノールが豊富で抗酸化作用、整腸作用が期待できます。
メロン melon 舐瓜 食物繊維、カリウム、ビタミンCなどが含まれています。
レモン lemon 檸檬 ビタミンC、クエン酸、リモネン、カリウム、葉酸が豊富で疲労回復や美肌によいと言われています。
イチゴ Strawberry 炭水化物、ビタミンC、カリウム、食物繊維などが含まれています。美肌や免疫力アップが期待できます。

 

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

...

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

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

 

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