Tabelレイアウトを使っていて、こんな感じできれいなCSSでレイアウト調整を行っていると思います。

<style>
	table { table-layout:fixed }
	th { width:100px; background-color:#ccf }
</style>

見出し		中見出し
見出し

ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。
（なぜか、中見出しが「100px」になっていない）

見出し
見出し		中見出し

これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。

それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。
これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。

ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない）

この現象を防ぐには、どうすればいいのかというと最初に表示する前に列の幅を＜colgroup＞で決めてしまえばいいのです。

以下のように＜tbody＞の前に＜colgroup＞と＜col＞を追加してください。

<table>
	<colgroup>
		<col style='width:100px;'>
		<col>
		<col style='width:100px;'>
		<col>
	</colgroup>
	<tbody>
		<tr>
			<th>見出し</th>
			<td colspan="3"></td>
		</tr>
		<tr>
			<th>見出し</th>
			<td></td>
			<th>中見出し</th>
			<td></td>
		</tr>
	</tbody>
</table>

見出し
見出し		中見出し

これで「table-layout:fixed」が先に＜colgroup＞を読み込んでレイアウトを固定化するため、確実に崩れなくなりました。
また、＜col＞にはclassも指定できますので、このようにも記述できます。

<style>
	.thstyle { width:100px; }
</style>

<table>
	<colgroup>
		<col class="thstyle">
		<col>
		<col class="thstyle">
		<col>
	</colgroup>
	<tbody>
<!--　省略　-->

Tableでのレイアウトは便利なのですが、意外と落とし穴があるので上級者でもいろいろと気をつける必要があったりしてなかなか大変ですね。

Comments

Comments