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

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

我使用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

最佳答案

不要使用桌子。而是将“第2列”浮动到右侧，然后（取决于定义列宽的方式）使“第1列”浮动到左侧，或者给其右边距与“第2列”的宽度相同。对于移动设备，只需删除浮标和边距。

如果这样做没有帮助，则最好以fiddle的形式发布相关的HTML和CSS。

关于html - table-footer-group和table-header-group不占用表格的宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23356899/