<h2>width指定した場合</h2>
<table class="hoge">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.