[nick2price]

Hi guys. Having a bit of a problem. I have a table displaying on my website which has a format like

...
<tr>
        <td>A</td>
        <td>B</td>
</tr>
<tr>
        <td>A</td>
        <td>B</td>
</tr>
<tr>
        <td>A</td>
        <td>B</td>
</tr>
<tr>
        <td>A</td>
        <td>B</td>
</tr>
...

So pretty basic, and it displays like
A B
A B
A B

In order to get this table displaying nicely on my mobile version, I wanted to take it into a single column display. So in my media query, I have done,

display: block;
float: left;
margin-left: -6px !important;
width: 270px !important;

Which works pretty well, and in a single column. The problem is, the single column displays like
A
B
A
B
...

Is there anyway where it would be possible to display all the first td's first, and then the second td's? So in essense, getting the single column like
A
A
B
B
...

I dont think I can alter the html table, as the only place I can really change the display is in the media query.

Any advise appreciated.

Cheers

[exiles.prx]

I can't think of a way to do this using only CSS, unless you float the first child left, the last child right and then using absolute positioning to adjust them. I'm not even sure if that would work correctly or display correctly across all browsers/displays. You may have to look into using javascript to manipulate the HTML and CSS to get your desired effect. Most phones today support javascript so only a small percentage of people will see the column in the incorrect order.

EDIT: Just thought of something that may work. You could float both childs left (first and last) , use absolute position and use margins to push down the last child ( B ). This may work if the items are always the same number, otherwise if the amount of items vary then this will defiantly not work.

This post has been edited by exiles.prx: 26 July 2012 - 11:39 AM

[nick2price]

I was thinking about javascript, but I dont really want to rely on this. I think the best option would be to go back to the original table, and turn this into two tables. This should make it easier to display one table after the other for the mobile device.