セルの横幅均等化

目的

• セルの横幅を均等にしたい。

実行結果

解説

• セルの横幅が均等なのでスッキリとコンパクトに見せたい時にオススメです。
• 行数(横)を変えてもセルの横幅は自動で均等になります。
• 行数と列数が多くなるほど横幅が狭くなるので、多くなるなら横スクロール式tableの使用への切り替えも検討してください。

HTML

<table class="layout_6_1">
	<thead>
		<tr>
			<th>観光地名</th>
			<th>所在地</th>
			<th>主な分類</th>
			<th>見どころ</th>
			<th>ベストシーズン</th>
			<th>備考</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>富士山</td>
			<td>静岡･山梨</td>
			<td>山岳･自然</td>
			<td>登頂･5合目</td>
			<td>07月〜09月</td>
			<td>日本最高峰の山</td>
		</tr>
		<tr>
			<td>金閣寺</td>
			<td>京都府</td>
			<td>寺院･歴史</td>
			<td>黄金の舎利殿</td>
			<td>通年(冬の雪)</td>
			<td>ユネスコ世界遺産</td>
		</tr>
		<tr>
			<td>厳島神社</td>
			<td>広島県</td>
			<td>神社･歴史</td>
			<td>海上の大鳥居</td>
			<td>秋(紅葉)</td>
			<td>日本三景の1つ</td>
		</tr>
		<tr>
			<td>白川郷</td>
			<td>岐阜県</td>
			<td>集落・文化</td>
			<td>合掌造り集落</td>
			<td>冬(ライトアップ)</td>
			<td>伝統的な建築様式</td>
		</tr>
		<tr>
			<td>華厳の滝</td>
			<td>栃木県</td>
			<td>滝･自然</td>
			<td>97mの落差</td>
			<td>秋(紅葉)</td>
			<td>日本三名瀑の1つ</td>
		</tr>
	</tbody>
</table>

CSS

.layout_6_1 {
	text-align: center;
	width: 96%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: solid 2px #333333;
	border-collapse: collapse;
	table-layout: fixed;
}

.layout_6_1 th,
.layout_6_1 td {
	font-size: 14px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	border: dotted 1px #333333;
	word-wrap: break-word;
}

.layout_6_1 th {
	background-color: #EDEDED;
}

.layout_6_1 a {
	text-decoration: none;
}

• 14行目のtable-layout: fixed;によってセルの横幅が均等になっています。

.layout_6_1 {
	text-align: center;
	width: 96%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: solid 2px #333333;
	border-collapse: collapse;
	table-layout: fixed;
}

.layout_6_1 th,
.layout_6_1 td {
	font-size: 14px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	border: dotted 1px #333333;
	word-wrap: break-word;
}

.layout_6_1 th {
	background-color: #EDEDED;
}

.layout_6_1 a {
	text-decoration: none;
}

• スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。