[CSS] テーブルのセル内に区切り線を引いてみた

css-table-cell-border CSS

Nプログラマです。

以前VPSの比較表の記事を書いた時に作った、テーブルのセル内に区切り線を表現する方法をメモしておきます。

実際に使うとこんな感じになります

お名前
N プログラマNプログラマ

概要

目標

  • テーブルのセル内に区切り線を表現する

検証した環境

  • WordPress 5.1.1 + Gutenberg

やってみる

CSS: セル内に区切り線を引く

先にCSSを作成しておきます。

.table-cell-separator {
    display: block;
    border-bottom: 1px dashed black;
}

利用しているWordPressのテーマによってCSSの登録方法は異なります。

style.cssなどに追記する時はバックアップを忘れずに。

説明

ブロックレベル要素の下側に、1pxの黒色ドット線を表示するものです。

1pxのところを変更すれば太さが変わり、dashedのところを変更すればが変わります。

使い方

区切り線の上に表示する文字をspanタグで囲んであげます。

次のテーブルの作成のトコロで具体的なコードを記載します。

テーブルを作る

エディタでテーブルブロックを選択して、2行2列のテーブルを作ります。

作ったあとは、こんな感じでセル内に文字を入力していきます。
(セル内の文字は適当です)

お名前姓名
N プログラマNプログラマ

セル内に区切り線を表示させていく

先程作成したCSSを使い、区切り線を表示していきます。

姓名に区切り線を引く

まずは姓名の部分から、区切り線を引いてみます。

まず、先程作成したテーブルを「htmlとして編集」で編集モードにします。

tdタグで囲まれた姓名があるので、区切り線の上に表示したい部分をspanタグで囲んで、先程作ったcssクラスを指定します。

ここでは姓を上名を下にしてみます。

変更前後のコードで違いを見てみましょう。

変更前
<td>姓名</td>
変更後
<td><span class="table-cell-separator">姓</span>名</td>

これをプレビューをすると、姓が上名が下になり、間に区切り線が表示されていると思います。

Nプログラマの部分も同じように変更してみます。

変更前
<td>Nプログラマ</td>
変更後
<td><span class="table-cell-separator">N</span>プログラマ</td>

こちらはNが上プログラマが下になり、その間に区切り線が表示されているはずです。

これで記事の冒頭にあるテーブルが完成しました。

お名前
N プログラマNプログラマ

スマホで表示するページは領域が狭いので、テーブルの表示する項目を節約したいときは、こんな感じで表示してみるといいかもしれませんね。

おわりに

今回は、テーブルのセル内に区切り線を引くという内容でした。

CSSがあまり得意ではないので、もっといい方法があるかもしれません。

個人的にこれで表現したい見た目になったので、まぁいいかなって思っています。

それでは、このへんで。
バイナリー!

タイトルとURLをコピーしました