【CSS/html】table,tdの幅を文字に合わせる方法

「tableの一列目を文字に合わせたい！」

tableの一列目（特定の列td）を文字に合わせる方法を解説します。

【方法1】width:0とwhite-space:nowrap

「width:0」を指定すると幅が最小になり、中のテキストが折り返されます。

「white-space:nowrap」は折り返しさせないCSSです。

この2つを組み合わせることで改行させず幅を最小にできます。

1999年12月30日	テキスト
2000年1月1日	テキスト

<style>
.example{
    width: 100%;
}
.example td:first-child{
    width: 0;
    white-space: nowrap;
}
</style>
<table class="example" border="1">
    <tr>
        <td>1999年12月30日</td><td>テキスト</td>
    </tr>
    <tr>
        <td>2000年1月1日</td><td>テキスト</td>
    </tr>
</table>

tableの一列目は「td:first-child」で指定できます。

一列目がthの場合はそのまま「th」に指定するといいでしょう。

【方法2】width:○○em

「em」は文字サイズを基準とした単位です。これで文字数分の幅を指定できます。

最大文字数が明確、white-space:nowrapを使いたくない、width:0に抵抗があるときに使うといいでしょう。

1999年12月30日	テキスト
2000年1月1日	テキスト

<style>
.example{
    width: 100%;
}
.example td:first-child{
    width: 10em;
}
</style>
<table class="example" border="1">
    <tr>
        <td>1999年12月30日</td><td>テキスト</td>
    </tr>
    <tr>
        <td>2000年1月1日</td><td>テキスト</td>
    </tr>
</table>

注意点

• letter-spacingの幅も考慮する
• 半角が含まれるときは文字幅が変わる
  （0.5文字ではない、フォントやブラウザによって変わる）

よって多めの数値を指定することをオススメします。

この方法では幅をピッタリ合わせることは難しいです。

余白を持てるとき、枠線を引かないときにおすすめです。

【注意】width:fit-contentは効かない

width:fit-contentは親要素の幅を子要素の幅に合わせるCSSです。

しかし、tdには効きません。

逆にdivなどには効くため覚えておくといいでしょう。

【まとめ】table,tdの幅を文字に合わせる方法

【方法1】width:0とwhite-space:nowrap

【方法2】width:○○em

注意点

• letter-spacingの幅も考慮する
• 半角が含まれるときは文字幅が変わる
  （0.5文字ではない、フォントやブラウザによって変わる）

以上、tableの一列目（特定の列td）を文字に合わせる方法でした。