0

If I have a table structured like this:

<table id="tableid">
    <tbody>
        <tr>
            <td id="id1">Button A</td>
            <td id="id2">Button B</td>
            <td id="id3">Button C</td>
            <td id="id4">Button D</td>
        </tr>
    </tbody>
</table>

Is it possible to make the items position in a specifically defined order without switching them around in html and without using absolute positions (and without use of js)?

Like if I wanted them to display from top to bottom: id2, id4, id1, id3.

It's for a website that allows customizing css styles for your profile, but doesn't allow manipulation of the html itself so I can't simply switch the order of them around in html.

Using absolute positioning works but it's pretty awkward manually defining positions because if I adjust the position of 1 item then I need to manually do it for all of them.

If absolute position is the only way, then is it possible to define the absolute position of an item to be the same position defined for another + an amount? So for example, could I define id2 with top: 200px and then for id4 can I retrieve that top value from id2 and add 10px to it or would I need to manually set it as 210px?

Sakuya
  • 660
  • 5
  • 23
  • I think `display: flex` may be interesting for you. It allows to set order of elements but I'm not an flexbox expert, you can read more at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – max Oct 16 '15 at 22:43

1 Answers1

1

Flexboxes should be able to accomplish this as they allow CSS definitions of ordinal location of an element.

See this post on StackOverflow for a few solutions that should be able to achieve what you're looking for:

Switching the order of block elements with CSS

Community
  • 1
  • 1
Jonny Asmar
  • 1,900
  • 14
  • 16
  • Oh cool, I completely forgot about flexbox. I tried using it a long while ago but it wasn't supported by many browsers, good to see that it's supported by most browsers now! – Sakuya Oct 16 '15 at 23:26