【html/CSS】tableのセルや文字の隙間を詰めて小さくする方法

「スマホになったときtableの隙間を詰めて小さくしたい！」

tableのセルや文字の隙間を詰めて小さくする方法を解説します。

【セルとセルの隙間】border-collapse:collapse

tableは初期状態ではセルとセルの間に隙間があります。

これをなくすにはtableに「border-collapse:collapse」か「border-spacing:0」を指定します。

「border-collapse:collapse」はtableとセルの線を共有させるCSSです。

単純なtableであればこれだけで1px線のtableがカンタンにできあがります。

一方で複雑なtableを作ろうとするとこれではうまくいかないことがあります。

そんなときは「border-spacing:0」を指定しましょう。

border-spacingはセル間の隙間の距離を指定するCSSです。

これを0にすることでセル間の隙間をなくすことができます。

【セルと文字の隙間】padding

セルの内側と文字の間を調整するにはtdとthにpaddingを指定します。

文字にはline-heightで上下にも隙間があるため、paddingを指定するときは上下より左右をおおめに指定するとバランスがよくなります。

【文字の行間（上下）】line-height

文字の行間を調整するにはtdとthにline-heightを指定します。

【文字の字間（左右）】letter-spacing

文字の字間を調整するにはtdとthにletter-spacingを指定します。

letter-spacingはマイナスの値も指定できるため、さらに詰めることもできます。

【文字サイズ】font-size

文字のサイズを調整するにはtdとthにfont-sizeを指定します。

全部適用

上記を全部適用させるとこんなに小さくなります。

わかりやすいように数値を極端にしているため、実際はちょうどいい数値に調整しましょう。

【まとめ】tableの隙間を詰めて小さくする方法

• 【セルとセルの隙間】tableにborder-collapse:collapse
• 【セルと文字の隙間】tdにpadding
• 【文字の行間（上下）】tdにline-height
• 【文字の字間（左右）】tdにletter-spacing
• 【文字サイズ】tdにfont-size

以上、tableの隙間を詰めて小さくする方法でした。