<h2>width指定した場合</h2>
<table class="hoge">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">hoge1</td>
<td colspan="5">huge1</td>
</tr>
</table>
<table class="hoge">
<tr>
<td colspan="3">hoge1</td>
<td colspan="5">huge1</td>
</tr>
<tr>
<td colspan="3">hoge3</td>
<td colspan="5">huge3</td>
</tr>
</table>
<h2>width指定しない場合(自動調整)</h2>
<table class="fuga">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">fuga</td>
<td colspan="5">fugafuga</td>
</tr>
</table>
<table class="fuga">
<tr>
<td colspan="3">fuga</td>
<td colspan="5">fugafuga</td>
</tr>
<tr>
<td colspan="3">fuga</td>
<td colspan="5">fugafuga</td>
</tr>
</table>
.hoge ,
.fuga {
border-collapse: collapse;
margin-bottom: 30px;
width:800px;
}
.hoge td {
width: calc(100% / 8);
border: 1px solid #000;
}
.hoge td[colspan="3"] {
width: calc(100% / 8 * 3);
}
.hoge td[colspan="5"] {
width: calc(100% / 8 * 5);
}
.fuga td {
border: 1px solid #000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.