簡単に。
どういうことか
table内を線で区切るとき線が並んだり余白があると邪魔くさいから、一般的に「border-collapse: collapse;」を付与する。これの仕様によりtable内の角丸を書いても無効になる。
雑に言えばtableは角丸が使えないタグなので、どうやっていくかという話。
こうする
<div class="table_wrap">
<table>
<thead>
<tr>
<th>あああああああああああ</th>
<th>あああああああああああ</th>
<th>あああああああああああ</th>
<th>あああああああああああ</th>
</tr>
</thead>
<tbody>
<tr>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
</tr>
<tr>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
</tr>
<tr>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
</tr>
<tr>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
<td>ああああああああ</td>
</tr>
</tbody>
</table>
</div>.table_wrap{
max-width: 1200px;
overflow-x: auto;
border-radius: 20px;
border: 1px solid #eee;
}
.table_wrap table{
width: 100%;
border-collapse: collapse;
}
.table_wrap table :is(th,td){
padding: 20px;
border: 1px solid #eee;
}
.table_wrap table :is(th,td):first-child{
border-left: none;
}
.table_wrap table :is(th,td):last-child{
border-right: none;
}
.table_wrap table :is(thead,tbody):first-child tr:first-child :is(th,td){
border-top: none;
}
.table_wrap table :is(tbody,tfoot):last-child tr:last-child :is(th,td){
border-bottom: none;
}解説
tableの内部だけ線を引いて、外側はラッピング要素で整える。角丸で囲ってはみ出た部分はoverflowでちょん切る。
ちょっとテクいのは「border-top: none;」と「border-bottom: none;」の部分で、この書き方をすればtheadとtfootの有無に関わらずどちらの状況でもちゃんと線を消せる。
なお、tableを書くときに直接trを突っ込んだ場合はブラウザ側が勝手にtbodyを追加してくれるので漏れがない状態。結構前から補完してくれてるので、よっぽど古いブラウザでもなきゃ平気だと思う。
汎用性について
スマホ表示とかでブラウザ幅よりtableがデカくなったらどうすんのって話があるんだけど、これは既にクリアされてる。というのは、ラッピング要素の「overflow-x」と「max-width」のおかげ。
.table_wrap{
max-width: 1200px;
overflow-x: auto;
}だけどそれはアルファベットの話で、日本語だとだめ。文字列が要素より長かったら勝手にぶち抜くんだけど、みたいなアレを活用してるんで、日本語だと素直に自動改行しちゃうんで、同じことができない。
日本語でやっていきたいなら、まずひとつは「white-space」。
.table_wrap table :is(th,td){
white-space: nowrap;
}これを足せば自動改行しなくなる。なので、改行が必要な場合はちゃんと<br>を使いましょう。セルごとに個別に振るのは面倒くさいから全体に反映させて、組み込んだcss下でのtableの仕様として理解する必要がある。
もう一つはtableなりth、tdなりの幅を実数で指定することだけど、「ぶち抜くことありき」ならいいけど「ぶち抜くようならスクロール」みたいな感じでやりたいならあんまり気持ちのいいもんじゃない。それにまあ、どんだけぶち抜くかは中身によるので一律にするのは変だしね。
用法用量を守るようにというか、シチュエーションを想定しないとしんどいですね。
ページ幅に干渉する場合
tableが横スクロールするようになった状態でブラウザ幅を縮めていくと、ページ幅が一定数から短くならないことがある。言い換えるとブラウザ自体に横方向のスクロールバーができている状態。で、見てみるとtableの幅とリンクしている。
そうした場合、親というか先祖要素を確認する。
先祖の要素でdisplay:grid;を使ってたらそれを無効化する。多分原因はそれのはず。
PCレイアウトで上下左右にいい感じに並べてたのを、SPレイアウトにしたときは全部縦並びに変えるのはよくある話で、それをgridのままでやってたら該当するケース。
WordPressだったら
現在のWPの記事だとこんな感じで出力される。
<figure class="wp-block-table">
<table>
<tbody>
<tr><td>aaaaa</td><td>bbbb</td></tr>
<tr><td>bbbb</td><td>eeeee</td></tr>
</tbody>
</table>
</figure>thead、tfootはこんな感じで、figureだからfaigcaptionも付けられる。
<figure class="wp-block-table">
<table>
<thead><tr><th>eeeeee</th><th>eeeee</th></tr></thead>
<tbody><tr><td>cccc</td><td>ccccc</td></tr><tr><td>cccc</td><td>cccccc</td></tr></tbody>
<tfoot><tr><td>ddddd</td><td>ddddd</td></tr></tfoot>
</table>
<figcaption>aaaaaa</figcaption>
</figure>「高度な設定」でClassを振るとfigureに付与されるんで、その辺をうまくやりましょうって感じになる。tableだけならいいんだけどfigcaptionも含まれちゃうのが難点。書かないほうがいいですね。
| testtesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttest |
| testtesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttest |
| testtesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttest |
| testtesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest | testtesttesttesttesttesttesttesttesttesttesttesttesttesttest |
コメント