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

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:#f7f7f7; }

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

 

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

(奇数)
tr:nth-child(2n+1) { background:#f7f7f7; }
tr:nth-child(odd) { background:#f7f7f7; }

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

 

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

tr:nth-child(3) td:nth-child(2) { background:#f7f7f7; }
リンゴ 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;}
}

 

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

-css

関連記事

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSSで上下センター揃え

上下センター揃え フレックスボックス 「display: flex」を使います。 セレクタ{display: flex; justify-content: center; align-items: c …

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

テキストに縁や影をつける

cssでテキストに縁や影をつけます。