table-footer-group 和 table-header-group 不占用表格的宽度

Posted 2023-03-05

【中文标题】table-footer-group 和 table-header-group 不占用表格的宽度

【英文标题】：table-footer-group and table-header-group not taking the width of the table

【发布时间】：2014-06-14 22:23:13

【问题描述】：

首先我在做一个响应式网站，布局有点复杂。我在一个表格中有两列。客户端首先需要在移动设备中的最后一列，最后一列。

我使用 table-header-group 和 table-footer-group 做到了这一点。父表采用容器的宽度，但列不采用表的宽度。

请在此处找到附件。

您可以在图像的最后一个看到表格宽度，但列没有采用该宽度。

谁能知道如何根据表格固定列的宽度。

请在下面找到 html

<div class="col1">
<table cellpadding="0" cellspacing="0" border="0" >
    <tr>
        <td class="colA">
            <img src="https://cdn4.iconfinder.com/data/icons/redis-2/467/Redis_Logo-256.png" />
        </td>
        <td class="colB">
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
        </td>
    </tr>
</table>

这里是 Demo Fiddle

【问题讨论】：

响应式网页设计不能使用表格！用 div 代替

【参考方案1】：

将 display:table 和 width:100% 添加到父 tr 以使列全宽。

<div class="col1">
<table cellpadding="0" cellspacing="0" border="0" >
    <tr style="display:table;width:100%;">
        <td class="colA">
            <img src="https://cdn4.iconfinder.com/data/icons/redis-2/467/Redis_Logo-256.png" />
        </td>
        <td class="colB">
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
            <img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/32/Paypal.png" />
        </td>
    </tr>
</table>

见fiddle

【讨论】：

我知道这被否决了，但正是我想要的。实际上并没有使用表格，而是将 display:table 设置为父元素解决了我 100% 的问题。

【参考方案2】：

不要使用桌子。而是将“第 2 列”浮动到右侧，并且（取决于您如何定义列的宽度）向左浮动“第 1 列”，或者给它一个与“第 2 列”宽度相同的右边距。对于移动设备，只需删除浮动和边距。

如果这没有帮助，请发布相关 HTML 和 CSS，最好是 fiddle。

【讨论】：

根据要求我不能在 HTML 标签中什么都做，我只能编辑 css，无论如何我会为此添加小提琴。

我已经用 HTML 编辑了问题，并提供了指向小提琴的链接

我认为问题在于通过将tds 设置为table-header/footer-group，您将它们放在tr 中，这没有意义并且会混淆浏览器。我认为当前的要求无法解决这个问题。