1

我有一张四行的桌子。在第 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>

4

1 回答 1

0

一张 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>
于 2017-12-13T08:01:38.740 回答