代码之家 › 专栏 › 技术社区 › mr developer

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

columnspan tablecolumn html-table html

1

mr developer · 技术社区 · 7 年前

我有一张四排的桌子。第1行内有1列。第2行内有3列。第3行内有2列。第4行中有2列。第1行的列的colspan为3,因此该列跨越整个表,但在第3行和第4行中,我希望这两列平均分布到表的整个宽度。问题是我无法将colspan添加到1.5,它根本不起作用。我的问题是,如何使第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>

1 回复 | 直到 7 年前

1

0

stoi2m1 7 年前

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>