文章/答案/技术大牛

发布

社区首页 >问答首页 >表列间距占用最后的空间而不使用colspan

问表列间距占用最后的空间而不使用colspan
EN

Stack Overflow用户

提问于 2017-12-13 03:55:58

回答 1查看 806关注 0票数 1

我有一张四排的桌子。在第1行内有1列。第2行的内部有3列。第3行的内部有2列。在第4行内有2列。第1行的列跨度为3，因此该列跨越整个表，但在第3和第4行中，我希望这两列平均分布到表的整个宽度。问题是，我不能再加上一个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>

columnspan

html

html-table

tablecolumn

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-13 08:01:38

一张12室宽的桌子怎么样？12可以用所需的所有列宽来计算。

第1行colspan 12 -1柱

第2行学院跨度4-3柱

第3行短柱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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47785234

复制

相似问题

问表列间距占用最后的空间而不使用colspan
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表列间距占用最后的空间而不使用colspanEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表列间距占用最后的空间而不使用colspan
EN