[CSS] テーブルのセル内に区切り線を引いてみた
Nプログラマ(@Nprog128)です。
記事の中に比較表を書く時にスペースの都合上、テーブルのセル内に区切り線を引きたくなることがあります。
というわけで、こんな感じに表示されるCSSを作ってみました。
| お名前 | 姓名 |
|---|---|
| N プログラマ | Nプログラマ |
今回はこの方法のメモリアになります。
概要
環境
| 環境 | バージョン |
|---|---|
| WordPress (Gutenberg) | 5.1.1 |
CSSの作成
セル内に区切り線を引くコード
CSSはこんな感じにつくりました。
1.table-cell-hr-separator {
2 display: block;
3 border-bottom: 1px dashed black;
4}
WordPressで利用する時は、style.cssに書くと思うので、いつでも変更を戻せるようにバックアップを取っておきましょう。
コードの説明
ブロックレベル要素の下側に、1pxの黒色ドット線を表示するものです。
1pxのところを変更すれば太さが変わり、dashedのところを変更すれば線が変わります。
使い方
区切り線の上に表示する文字をspanタグで囲んであげます。
具体的な使い方は、サンプルで説明します。
サンプルを作る
テーブルを作る
まずは、表示させたい表を作ります。
今回は、2行2列のテーブルで作っていきます。
コード
1<table>
2 <thead><tr><th>お名前</th><th>姓名</th></tr></thead>
3 <tbody><tr><td>N プログラマ</td><td>Nプログラマ</td></tr></tbody>
4</table>
見た目
| お名前 | 姓名 |
|---|---|
| N プログラマ | Nプログラマ |
表の右側で、姓名とNプログラマに区切り線を入れていきます。
CSSを使う
先程作成したCSSを使い、区切り線を表示していきます。
姓名に区切り線を引く
まずは姓名から区切り線を引いていきます。
姓をspanタグで囲んで、先程作成したcssのクラスをしてします。
変更前
1<th>姓名</th>
変更後
1<th><span class="table-cell-hr-separator">姓</span>名</th>
結果を確認してみると、姓が上、名が下、と表示されて間に区切り線が表示されていると思います。
結果
| お名前 | 姓名 |
|---|---|
| N プログラマ | Nプログラマ |
Nプログラマに区切り線を入れていく
Nプログラマの部分も同じように変更をしてみます。
変更前
1<td>Nプログラマ</td>
変更後
1<td><span class="table-cell-hr-separator">N</span>プログラマ</td>
こちらの結果は、Nが上、プログラマが下、と表示されて間に区切り線が表示されていると思います。
| お名前 | 姓名 |
|---|---|
| N プログラマ | Nプログラマ |
完成
これで記事の冒頭にあるテーブルが完成しました。
見た目
| お名前 | 姓名 |
|---|---|
| N プログラマ | Nプログラマ |
コード
1<table>
2 <thead><tr><th>お名前</th><th><span class="table-cell-hr-separator">姓</span>名</th></tr></thead>
3 <tbody><tr><td>N プログラマ</td><td><span class="table-cell-hr-separator">N</span>プログラマ</td></tr></tbody>
4</table>
スマホで表示するページは領域が狭いので、テーブルの表示する項目を節約したい時はこんな感じで表示してみるといいかもしれません。
おわりに
今回は、CSSでテーブルのセル内に区切り線を引く、という内容でした。
区切り線を引く方法は、他にもっといい方法があるかもしれません。
個人的にこれで表現したい見た目になったので、まぁいいかなって思っています。
それでは、このへんで。
バイナリー！
