Question

Is it possible to rebuild a table looking like this:

<table>
    <tr>
        <td>information 1</td>
        <td>information 2</td>
    </tr>
</table>

to something like this with CSS?:

<table>
    <tr>
        <td>information 1</td>
    </tr>
    <tr>
        <td>information 2</td>
    </tr>
</table>

Why I am asking is because this table, which is filled with content in a div, doesn’t look nice when I minimize the div for a mobile display.

UPDATE, Reason why I need to do this:
We are building a website for a customer that want’s responsive design. The “problem” is that the customer dosen’t know html/css that good, so he/she uses a WYSIWYG-editor when providing the content to pages. And of course, he/she knows Microsoft Office, and build the content like it’s done in that program, with tables.

Answer 1

You can effectively wrap tds by using media queries and applying css to float the cell into what looks like the next row. You’ll want to provide some nice visual queues to help people figure out what they’re seeing, though. Here’s a fiddle demonstration – resize the preview window.

Using your original markup, and applying the following CSS will wrap the second td when the window is less than 400px wide:

td {width: 200px; border: 1px solid black;}
@media screen and (max-width: 400px) {
    td {
        width: 100%;
        float: left;
    }
}
​