[まとめ]HTMLでtableがずれたときの確認事項

こんにちは。

Web制作の案件でお問い合わせフォームを作成中のとき、なぜか、th,tdの幅を指定してるのにもかかわらず、ずれてしまい時間が取られてしまいました。

その際にいろいろ調べて試してみたのでここにまとめたいと思います。

確認事項

１．tableの幅の指定

thやtdで「％」を使って幅を指定するとき、長さの基準はtableの長さです。

そのため

table{
  width: 100%;
}

のように長さを指定しましょう。

２．table-layout の指定

だいたいの場合はこれで解決するらしいです。

table{
	table-layout: fixed;
	width: 100%;
　　}	

このように「fixed」を指定しましょう。

３．colspanを使っているかチェック

「colspan」を使っているとそこでも長さを指定してしまっているため、そろいません。

例としてはこんな感じです。

<th>見出し</th>
<td colspan="2"></td>

このように「colspan」を使いたい人は以下のものを<tbody>に付け加えましょう

<colgroup>
        <col style='width:100px;'>
        <col>
        <col style='width:100px;'>
</colgroup>

これを指定することで、例えばth,td,tdの並びになっていたら、100px,指定なし,100px

と指定することが出来ます。

４．table,trのdisplay の見直し

私の原因はここでした。

tableのdisplayは、

table{
	display: table;
　　}	

である必要があります。

そのため、tableにはblockなどを指定しないようにしましょう。

私は、以下のように指定していたためうまくいきませんでした。

tr{
	display: inline-block;
　　}