【ワードプレスで表の高さが変わらない】をやっと解決できた方法

ここでは、ワードプレスで作った表の「行の高さ」を変更する方法を紹介しています。

小豆

表のデザインに納得がいかない。
行の高さをもっと狭くしてスタイリッシュにできないの？

ワードプレスで表（テーブル）を作ること自体はそんなに難しくないんですよね。

ですが、行の高さを狭く（小さく）する方法がどうしても僕にはわかりませんでした。

表のデザインに納得がいかないままワードプレスを使い続けること約2年。

やっと行の高さを調整する方法がわかりましたので紹介します。

ワードプレスの表で行の高さを小さくできない問題

僕はワードプレスで表を作るときに、【TinyMCE Advanced】というプラグインを使用しています。

気軽に表を作成できるこのプラグインはとにかく便利。

実際に使用している！という人もすごく多いはずです。

ですがこのプラグインで作った表、行の高さを大きくすることはできるのに、なぜか小さくすることができないんですよね。

ネットで散々調べてみましたが、どうしてもドンピシャな解決策にたどり着けません。

ちなみにネットで解決策として出てくるのは大体この３つ。

紹介されていたこれらの方法では、確かに行の高さを大きく（広く）することはできるのですが、どんなに小さな値を入れても行の高さを小さく（狭く）することはできませんでした。

大福

無駄に大きなこのセルの高さが気に入らないんだよなぁ。
もっとシュッとしたスッキリデザインに表を作りたいのに・・。

で、あれこれと試行錯誤している内にやっと行の高さを小さくすることに成功しました。

大福

そう、これこれ！
やっとスッキリデザインの表を表示することができた。

表の「行の高さ」を簡単に調整する方法【基本編】

それぞれについて解説します。

行の高さを大きく（広く）する方法

行の高さを大きく（広く）する方法は簡単です。

セルのプロパティ内の【高さ】に、任意の数字を入れれば行の高さを簡単に大きくすることができます。

試しに行の高さを「50px」で指定しました。

高さの指定なし

高さを「50px」に指定

行の高さを小さく（狭く）する方法

ちょっと厄介なのが、行の高さを小さく（狭く）する方法。

上で紹介した方法のように、プロパティ内に【高さ】を入力しても行の高さを小さく（狭く）することはできません。

ちなみにデフォルトの行の高さは「36px」だったので、試しに半分の「18px」で入力してみます。

※使用しているソフトや環境によってデフォルトの高さは異なるかもしれません。

高さの指定なし（デフォルト36px）

高さを「18px」に指定

大福

18pxに指定したのに、全然行の高さが変わってない。

どうやら、表のセル内に自動的に設定されている「余白」が原因になっているようです。

ということで、表内の行（セル）の高さを狭くするために、余白を調整してみました。

高度な設定内の「スタイル」に【padding: 0px;】と入力。

セル内上下の余白を削除することで、行の高さを小さく（狭く）することができました。

表の「行の高さ」を簡単に調整する方法【応用編】

先ほど紹介した方法では、【padding: 0px;】と入力することで、セル内の余白を完全に削除してスッキリとした表を作成することができました。

ちなみに、この「0px」の数字を変えることで、セル内の余白を細かく調整することができます。

指定なし（デフォルトの状態）

【padding: 0px;】で指定

【padding: 1px;】で指定

【padding: 2px;】で指定

【padding: 5px;】で指定

指定した行だけの高さの変更も可能

任意の行を指定した状態で「セルのプロパティ」を変更することで、指定の行だけの高さの調整もできます。

まとめ：高さを調整してお気に入りの表を作ろう

表の高さの調整をすることで、見た目もスッキリな見やすい表を作成することができるようになります。

デフォルトの状態の「ぼってりした見た目の表」からやっと卒業することができました。

👆こんな感じの表も簡単に作れます。

大福

ワードプレスでの表作成が苦手。

こんな人にはこちらの記事もおすすめです。