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

Question

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

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

请在此处找到附件图片。

您可以在图片的最后一个部分看到表格宽度，但是该列未占用该宽度。

任何人都可以根据表格知道如何修复列的宽度。

请找到下面的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

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

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

Answer 2

将显示：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