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

Question

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

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

请在此处找到附件。

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

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

请在下面找到 HTML

<div class="col1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <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

Answer 1

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

<div class="col1">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <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

Answer 2

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

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