表-表尾-组和表头-组不采用表的宽度

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

将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

不要用桌子。相反，将"column 2“向右浮动(取决于您如何定义列的宽度)，或者将"column 1”向左浮动，或者给它一个与"column 2“宽度相同的右边距。对于移动端，只需去掉浮动和边距即可。

如果这不起作用，可以把相关的超文本标记语言和CSS张贴出来，最好是fiddle格式的。