time 2017/10/17
タイトルのまんまですが、tableでcolspanを使う時には、ちゃんとcolgroupでwidthを指定してあげた方が無難っぽいです。
今までブラウザが良さげにやってくれていたので特に意識してなかったのですが、ややこしいtdの結合が必要になった案件で表示がおかしくなりました。
結合自体は上手くいっているけど、widthが足りない感じになって見た目では結合されてないように見えていました。
CSSでwidthを指定してもおかしいままだったので、下のサンプルコードのようにcolgroupを使ってwidthを直接指定する事で解決。
↓サンプル
<table>
<colgroup>
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="3">2</td>
</tr>
</tbody>
</table>
