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

【问题标题】：Table column spacing take up last space without using colspan表格列间距占用最后一个空间而不使用 colspan
【发布时间】：2018-05-26 21:11:41
【问题描述】：

我有一个有四行的表。在第 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>

【问题讨论】：

欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道您有什么tried so far 来解决您的问题，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)
@ObsidianAge 添加了代码。我解释了我在帖子中尝试过的内容

标签： html html-table tablecolumn columnspan

【解决方案1】：

12 个单元格宽的表格怎么样。您需要的所有列宽都可以考虑 12。

第 1 行 colspan 12 - 1 列
第 2 行 colspan 4 - 3 列
第 3 行 colspan 6 - 2 列
第 4 行跨度 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>

【讨论】：