CSS | フレックスボックスでテーブルを横に並べる方法

2021-12-232022-01-17CSS テーブル,CSS

テーブルタグで作成した複数の表をフレックスボックスを使って横に並べる方法を紹介しています。

フレックスボックスでテーブルを横に並べる

下記動作サンプルとサンプルコードでは2つのテーブルをフレックスボックスを使って横に並べています。

See the Pen CSS | Table width 100% and margin by yochans (@yochans) on CodePen.

HTMLには親要素とする「.container」とその中にテーブル（table）を2つ配置しています。

<div class="container">
	
	<table>
		<thead><tr><th>en</th><th>ja</th></tr></thead>
		<tbody>
			<tr><td>Apple</td><td>リンゴ</td></tr>
			<tr><td>Banana</td><td>バナナ</td></tr>
			<tr><td>Pine</td><td>パイン</td></tr>
			<tr><td>Grape</td><td>グレープ</td></tr>
		</tbody></table>
	
		<table>
		<thead><tr><th>en</th><th>ja</th></tr></thead>
		<tbody>
			<tr><td>Apple</td><td>リンゴ</td></tr>
			<tr><td>Banana</td><td>バナナ</td></tr>
			<tr><td>Pine</td><td>パイン</td></tr>
			<tr><td>Grape</td><td>グレープ</td></tr>
		</tbody></table>
	
</div>

親要素に display: flex を指定していますので、tableの widthを100％としても縦には並ばず横並びになります。

.container {
	display: flex;
}

table {
	width: 100%;
}

th {
	padding: 4px;
	color: #FFF;
	background: #4169e1;
}

td {
	padding: 4px;
	background: #87cefa;
}

tableに min-width で最小サイズを決めておくと、それ以上は小さくならずに横にスクロール可能な状態になります。

最小サイズ以下になる場合に折り返すには 親要素「.container」に flex-wrap: wrap を指定して折返し可能にしておきます。

.container {
	display: flex;
	flex-wrap: wrap
}

table {
	width: 100%;
	min-width: 300px;
}

th {
	padding: 4px;
	color: #FFF;
	background: #4169e1;
}

td {
	padding: 4px;
	background: #87cefa;
}