スリ飯屋MaLankaのフリーエンジニアな日々

このブログでは、フリーランス4期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログやプログラミング技術、沖縄移住やリモートワークライフについて発信しています。

【table】table要素のtdやth内テキストの周囲に、余白を持たせる方法

【table】table要素のtdやth内テキストの周囲に、余白を持たせる方法




手順

下記の記事を参考にしました。

文字の周りはある程度の余白(padding)をとる事です。 テキストの周りに余白をとる時はtableタグではtrではなくth、tdにつけます。

レスポンシブも対応!綺麗で見やすい表のデザイン11個[HTML&CSS] | SEO対策なら株式会社ペコプラ

例、

tbody td {
  padding: 1em 10px 1em 1em;
}