CSS | テーブルをwidth 100%とmarginありで、はみ出さないようにする方法

2021-12-21CSS テーブル,CSS

CSSでテーブル要素をwidth:100%にして、なおかつ横のmarginありにした時に、はみ出さないようにする方法を3つ紹介しています。

ページ内ではみ出してしまっている要素があると、横のスクロールバーが表示されてしまい困ります。

See the Pen CSS | Change table background color with hover by yochans (@yochans) on CodePen.

親要素に対して余白を付ける

解決策のひとつにテーブル本体（table）ではなくその親要素に対してpaddingやmarginを指定して余白を付けてテーブル本体が表示領域からはみ出さないようにする方法があります。

親要素にpaddingを付けた場合。

.container {
	padding: 10px;
}

table {
	width: 100%;
}

親要素にmarginを付けた場合。

.container {
	margin: 10px;
}

table {
	width: 100%;
}

display: flexを付ける

親要素にdisplay: flexが指定されている場合、要素にmarginを付けても、marginは反映されっつも表示領域からははみ出さず親要素のサイズ内に収まるようになります。

.container {
	display: flex;
}

table {
	width: 100%;
	margin: 10px;
}

widthからmargin分を差し引く

widthが100％のまま、という趣旨から外れますが、widthに100％からmargin分を差し引いた値を指定するという方法ではみ出しを回避する手もあります。

marginもパーセントで指定されている場合は指定はしやすい部類です。
widthにはmarginの左右分の合計値を引いた値を指定します。

table {
	width: 96%;
	margin: 2%;
}

marginがpx指定の場合はcalc()を使って指定します。

table {
	width: calc(100% - 20px);
	margin: 10px;
}