table-footer-group和table-header-group不占用表的宽度 [英] table-footer-group and table-header-group not taking the width of the table

问题描述

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

Firstly I am doing a responsive website, the layout is a bit complicated.I have two columns in a table. The client need last column first in mobile and the first column last.

我使用table-header-group和table-footer-group。父表使用Container的宽度，但列不占用表的宽度。

I did that using table-header-group and table-footer-group. The parent table takes the width of the Container, but the columns not taking table's width.

请在这里找到附加的图片。

Please find the attached image here.

您可以在图像的最后一个位置看到表格宽度，

You can see the table width in the last of the image, but the column's not taking that width.

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

Can anyone know how to fix the column's width according to the table.

请在下面找到HTML

Please find the HTML below

<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>

b 演示小提琴

推荐答案

不要使用表格。而是向右浮动列2（根据您如何定义列的宽度），向右浮动列1，或给它一个与列2的宽度相同的右边距。

Don't use a table. Instead float "column 2" to the right and (depending on how you define the widths of the columns) either float "column 1" left, or give it a right margin the same as the width of "column 2". For mobile just remove the floats and margins.

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

If this doesn't help, post the relevant HTML and CSS, best as a fiddle.

这篇关于table-footer-group和table-header-group不占用表的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！