Move table cells or list items to second row depending on screen width

Question

My question is simple.

First off, take a look at this code:

http://jsfiddle.net/Jk8Nr/

All I have is a very simple table with some padding, borders, text-alignment.

If you visit the jsFiddle above, you can increase the width of the results window and all of the table items will site comfortably. However, if you decrease the width of said window, I want the table cells to move the the second row in order so that side-scrolling isn't required.

I don't mind using <ul><li> for this instead of tables, but I do want to be able to do this.

If anyone is familiar with a solution, please let me know. I don't mind using jQuery/JS/CSS, but I'm not familiar with much else.

Update

Here's the updated jsFiddle with working solution:

http://jsfiddle.net/Jk8Nr/3/

Answer 1

I agree with the other posters suggesting you use a list instead of a table. You can then use a media query to force a wrap at a given device-width if you want that level of control over the layout. Here's an example setting a breakpoint at 600px (markup then css)

<header>
    <ul>
        <li>Home</li>
        <li>Gallery</li>
        <li>Location</li>
        <li>Rates</li>
        <li>Contact</li>
    </ul>
</header>​

ul {
    width:100%;
}
li {
    width:118px;
    float:left;
    clear:left;
    padding:5px 0;
    border: 1px solid #000; 
    border-bottom:none; 
    text-align:center;            
}
li:last-child {
    border-bottom:1px solid #000;
}

@media (min-width:600px) {
    li {
        clear:none;
        border-bottom:1px solid #000;        
        border-right:none;
    }
    li:last-child {
        border-right: 1px solid #000;
    }
}

http://jsfiddle.net/Jk8Nr/8/ ​