【CSS/html】tableのフォントサイズを指定する方法

「tableは幅が狭いから、一回り文字サイズを小さくしたい！」

tableのフォントサイズを指定する方法を解説します。

【結論】tableにfont-sizeを指定

tableのフォントサイズを指定するには、tableにfont-sizeを指定します。

font-sizeは文字サイズを指定するCSSです。

下記はtableにfont-sizeを指定した例です。tableの上下にある「上の文字」と「下の文字」と比較して小さくなっていることがわかります。

<style>
.example{
    font-size: 75%;
}
</style>
<p>上の文字</p>
<table border class="example">
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td class="example2">セル</td>
      <td>セル</td>
    </tr>
</table>
<p>下の文字</p>

font-sizeは子孫要素に継承するため、tableに指定するとtableの中身すべての文字サイズが変わります。

font-sizeの単位はpx、%、emなどがあります。%やemで指定するのがおすすめで、この場合親要素の文字サイズに対して相対的な文字サイズになります。

px指定するとカンタンにイメージ通りのサイズになります。

しかし、ユーザーによっては文字サイズを大きくしたいこともあります。px指定するとユーザー側で文字サイズを変えられない場合があります。%やemなら大丈夫です。

文字サイズの初期値は16pxです。

「font-size: 75%」を指定すると「16px(初期値)×75%=12px」となります。

セルごとに指定したい場合

特定のセルの文字サイズだけ変えたいときはそのセル（td）にclassをつけたうえでfont-sizeを指定しましょう。

<style>
.example{
    font-size: 75%;
}
.example2{
    font-size: 150%;
}
</style>
<p>上の文字</p>
<table border class="example">
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td class="example2">セル</td>
      <td>セル</td>
    </tr>
</table>
<p>下の文字</p>

【注意】font-sizeは継承され、かけ算される

font-sizeを%やemで指定した場合、親のfont-sizeを継承し、かけ算されます。

先述したように%やemは親要素の文字サイズに対して相対的な文字サイズになります。

例えば親に「font-size: 75%」を指定して、自身に「font-size: 150%」を指定した場合「16px(初期値)×75%×150%=18px」となります。

目当ての大きさになるように逆算しましょう。

うまくいかないときは下記を参照してください。

【まとめ】tableのフォントサイズを指定する方法

tableにfont-sizeを指定する。

特定のセルの文字サイズだけ変えたいとき
→そのtdにfont-sizeを指定

ただし、font-sizeは継承され、かけ算されるため、目当ての大きさになるように逆算する。

以上、tableのフォントサイズを指定する方法でした。