Tableの幅を均等にしたい

6月の終わりがそろそろ近づくこのころ…

大阪はやっと梅雨入り宣言してるのか知らんけど…

一日より早く梅雨上げ宣言になってほしい気分です…

しかもこっちは早く夏が来て、年中夏であってほしい気持ちでたまりません！

梅雨前線、そろそろ北上してくれへんかな…

天気のニュースを見る限り、のろのろと進んでるのか止まってるのか…

早く6月の終わりぐらいにええ加減にフルスピードで北上してくれ！

北上して、6月までに梅雨明け宣言してほしいんやけど！

しかも、今年は「気象病」にならないことを…

話変わりますが…

Tableの幅を均等にしたい

Webデザインの中、表組をするときに幅をきれいに揃えたいときありますよね。

いつも、横幅に「width:clac(100% / 4);」とか設定してましたね…

<table>
	<thead>
		<tr>
			<th>Title 01</th>
			<th>Title 01</th>
			<th>Title 01</th>
			<th>Title 01</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td>
		</tr>

		<tr>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td>
		</tr>

		<tr>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td>
			<td>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td>
		</tr>
	</tbody>
</table>

次に均等するときのCSSをご紹介します。

table {
	border: 2px solid #CCC;
	border-collapse: collapse;
	table-layout: fixed;/* 横幅を均等にしてくれるプロパティ */
	width: 100%;
}

table thead th,
table tbody td{
	border: 1px solid #CCC;
	padding: 10px;
	vertical-align: top;
}

以上、これで無事に表組がきれいに均等割りになりましたね。

では、また！