Question

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

我的代码是：

<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

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

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

1 个答案: