（この記事は2017年11月14日に修正・加筆しました）
コーディングの際
会社概要や沿革などのレイアウトにtableタグを使う機会が多々ありますが、
基本的なことがあやふやで毎回同じこと調べてるので
自分用にtable備忘録を作成しました。
セルの罫線をくっつけたい＝border-collapseで設定
1 2 3 4 | table{ border-collapse:collapse;/* くっつける */ border-collapse:separate;/* すき間を空ける */ } |
ちなみに、Firefoxでcollapseの設定をしたところborderが消えてしまうという現象を見たことがあります（Firefoxのバグ？）。
以下のコードで改善したので、同じ現象が見られている方はお試しください。
1 2 3 4 5 | table{ /* border-collapse: collapse; ←これだとborderが消えてしまう */ border-collapse:separate; border-spacing:0; } |
セルに対する設定は、th・tdに
borderや背景など、ついtrに設定しがちですが、trに設定しても効きません。
直接セルに指定します。
thを上揃え・左揃えにする。
thはデフォルトでは、縦・横とも真ん中揃えになっていますが
スタンダード（？）の上揃え・左揃えにするには下の設定を。
1 2 3 4 | tableth{ vertical-align:top;/* 上揃えにする */ text-align:left;/* 左揃えにする */ } |
セルの結合
縦結合と横結合、
いつもどっちがどっちかわからなくなるんですよねー。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table> <tbody> <tr> <throwspan="3">縦3マス結合</th> <th>縦１</th> <td>あああ</td> <td>いいい</td> </tr> <tr> <th>縦２</th> <tdcolspan="2">横2マス結合</td> </tr> <tr> <th>縦３</th> <td>さささ</td> <td>ししし</td> </tr> </tbody> </table> |
このような記述で、以下のような表示になります。
縦結合はrowspan
横結合はcolspan
です。
| 縦3マス結合 | 縦１ | あああ | いいい |
|---|---|---|---|
| 縦２ | 横2マス結合 | ||
| 縦３ | さささ | ししし | |
検索するとテーブルのジェネレーターなんかもあるので、
使ってみると効率化に良いかもです。
Table Tag Generator
スマホで横幅がはみ出すとき
box-sizing: border-box; + width: 100%;を指定しても
ディスプレイ幅よりはみ出していることがあります。
そんな時は、
1 2 3 4 | table{ table-layout:fixed; width:100%; } |
table-layout: fixed;を付与すると
しっくり100%に収まります。
まとめ
以上、初歩的なことからレスポンシブ対応まで
基本的なことをまとめました。
応用編もありますので、よかったら合わせてどうぞ。
tableタグに関するあれこれ備忘録【応用編】｜nico MEMO
コメント