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.

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.

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>

and here the Demo Fiddle

回答1:

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.

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

回答2:

Add display:table and width:100% to the parent tr to make columns full width.

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

See fiddle

来源：https://stackoverflow.com/questions/23356899/table-footer-group-and-table-header-group-not-taking-the-width-of-the-table

标签

html

css

responsive-design

html-table