How to change order of elements inside tables?


Tags: javascript,jquery,html,css,css3

Problem :

Demo

I'm using this table with css-trick solution for responsive tables. Now what I would also like to do is to change the order of elements once the table gets changed (768px) so that <h3> and image change orders so it will be 1. title, 2. image, 3. text.

How can I do that?

here is what i have sofar

<table border="0">
    <tbody>
        <tr>
            <td class="aimg">
                <img src="#">
            </td>
            <td class="atext">

<h3>Title 1</h3>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </td>
        </tr>
        <tr>
            <td class="aimg">
                <img src="#">
            </td>
            <td class="atext">

<h3>Title2</h3>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </td>
        </tr>
    </tbody>
</table>

css

.actions table td {
    vertical-align: top;
}
.actions table td.aimg {
    width:175px;
    padding-bottom:20px;
}
.actions table td.atext {
    padding-left:20px;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    .actions table, thead, tbody, th, td, tr {
        display: block;
    }
    .actions table tr {
        border-bottom:1px dashed #c0c7c7;
        margin-bottom:20px;
    }
    .actions table td.aoptions {
        padding-left:0px;
    }
}


Solution :

Fiddle

That's a bit tricky because of the table markup. Basically, you give the tr this css:

position: relative;

Then you position the title absolute to the top left and give the image the proper top padding, based on the height of the title.

There might be a better and more flexible solution for this.

Also... why are you using table markup for an element which is clearly no table?


    CSS Howto..

    How to CSS pairs of DIV text left/right of center

    How to prevent css keyframe animation on page load?

    How to load a new stylesheet when switching from JQuery Mobile site to PC site

    How to set width of all elements in a table column with CSS

    How to have a DIV appear after you hover over an image/link/another div?

    How to get the position of element transformed with css rotate

    How do I add a dropdown menu to my css menu?

    How to overlap items in an unordered list using CSS?

    How to enter PHP data into

    How to set background url for css files in thymeleaf?

    How i put css on message of Hibernate validator anotation message of spring project

    How to avoid the div 'move' when mouse hover?

    jQuery hide show id

    How to add an image to xml sheet using css

    How to override HTML with CSS

    How to add a border-bottom-image with css

    How can I get drop-down functionality working with CSS?

    How to apply css using ng-class in angularjs

    How to write a:hover in inline CSS?

    How to apply disabled style of ASP.net dropdownlist

    jQuery date picker show half day blocked

    How to show Bootstrap 3 popover scroll only when needed

    How to make a all the three tables to display at same height

    How to target separated class names through css?

    How to change a lot of img when hover

    how to make yo angular load bootstrap theme css

    How do I access separate points/sections on a single image in html/javascript?

    How to set a External SVG color in HTML using CSS?

    How to handle an id tag with '.' in CSS

    How do I get nested divs to be same height and expand to the largest of the heights?