表列间距不使用colspan占用最后一个空间

Question

I have a table with four rows. Inside of row 1 there is 1 column. Inside of row 2 there is 3 columns. Inside of row 3 there is 2 columns. Inside row 4 there is 2 columns. The column of row 1 has a colspan of 3 so that the column spans the whole table but in rows 3 and 4 I want the two columns to spread equally to the full width of the table. The problem is that I cannot add a colspan of 1.5 it just doesn't work. My question is how can I get the columns of rows 3 and 4 to span equally across the table in an even matter?

The code that I have is:

<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
<tr>
    <td colspan="3">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>

Answer 1

How about a table 12 cells wide. 12 can be factored by all of the column widths you require.

Row 1 colspan 12 - 1 column
Row 2 colspan 4 - 3 columns
Row 3 colspan 6 - 2 columns
Row 4 colspan 6 - 2 columns

<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
    <tr>
        <td colspan="12">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
</table>