Table 列间距占用最后 space 不使用 colspan

Question

我有一个有四行的 table。第 1 行内部有 1 列。第 2 行内部有 3 列。第 3 行内部有 2 列。第 4 行内有 2 列。第 1 行的列的 colspan 为 3，因此该列跨越整个 table，但在第 3 行和第 4 行中，我希望两列平均分布到 table 的整个宽度。问题是我不能添加 1.5 的 colspan 它只是不起作用。我的问题是如何让第 3 行和第 4 行的列在 table 中均匀分布？

我的代码是：

<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

table 12 个单元格宽怎么样。 12 可以因式分解为您需要的所有列宽。

第 1 行 colspan 12 - 1 列
第 2 行 colspan 4 - 3 列
第 3 行 colspan 6 - 2 列
第 4 行 colspan 6 - 2 列

<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>

Table 列间距占用最后 space 不使用 colspan

Table column spacing take up last space without using colspan

html

html-table

columnspan

tablecolumn