テーブルのセル（th）の横幅を文字数に合わせて可変にする

テーブルのセル（th）の横幅を固定幅で指定すること多いですよね。

固定幅で指定をしてると文字数によっては改行が目立って、見にくかったりといったことがあると思います。

テーブルのコーディング

普通に組んだ時のHTMLとSASSです。

<div class="c-table-container">
    <table class="c-table">
	    <tbody>
            <tr>
		    	<th>見出し</th>
		    	<td>テキスト</td>
	    	</tr>								
	    </tbody>
    </table>
</div>

.c-table {
	width: 100%;
	th,
	td {
		padding: 30px 20px;
		border-bottom: 1px dashed $_col_light_black;
		background-color: $_col_white;
	}
	th {
        width: 100px;
		font-weight: 700;
		color: $_col_black;
	}
	td {
		word-break: break-all;
	}
}

文字数が多いものに対してwidthを個別に指定するやり方もありますが、できたらそんなことはしたくないです。

解決策

セル（th）のwidthを狭くしておいて、nowrapを指定にする。

<div class="c-table-container">
    <table class="c-table">
	    <tbody>
            <tr>
		    	<th>見出し</th>
		    	<td>テキスト</td>
	    	</tr>								
	    </tbody>
    </table>
</div>

.c-table-container {
	width: 100%;
	overflow: auto;
}

.c-table {
	width: 100%;
	th,
	td {
		padding: 30px 20px;
		border-bottom: 1px dashed $_col_light_black;
		background-color: $_col_white;
	}
	th {
        width: 1px;
		white-space: nowrap;
		font-weight: 700;
		color: $_col_black;
	}
	td {
		word-break: break-all;
	}
}

c-table-containerで囲っているのは文字がとてつもなく増えた場合のことも想定して横スクロールができるようにしています。細かいですがそういうことも踏まえてコーディングすることはとても大事です。

上記のやり方はtable-layout:fixed;ができないので、したい場合はtdにmax-width:0を指定することで解決します。