根据屏幕宽度将表格单元格或列表项目移动到第二行

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

add

border-collapse: separate;

to your TABLE-style

and

display: inline-block;

to your TD/TH-Style...

cheers.

Answer 2

I would strongly suggest using a list for this, ordered or unordered as you see fit; if only because of the semantics (a navigation menu is a list of pages to which you may wish to go), whereas a table should present data in a tabular format. That said, I'd propose:

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

With the CSS:

header ul {
    width: 100%;
    font-size: 0; /* to remove the white-space gaps between the li elements */
    text-align: center; /* to center the list, amend as appropriate */
}

header ul li {
    font-size: 16px; /* to explicitly reset the font-size and
                        override that of the parent */
    display: inline-block; /* to allow for wrapping */
    width: 19%; /* a baseline width, if the monitor is wide enough to allow it */
    min-width: 7em; /* a minimum width, if the 19% of the width of the ul is less than
                       7em, the li elements will wrap to the next line, rather than
                       becoming too small to be functional */
    border: 1px solid #000;
    -webkit-box-sizing: border-box; /* To explicitly include the border in the width
                                       of the element */
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

JS Fiddle demo .

Answer 3

Please use some semantic markup like this:

<header>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Location</a></li>
            <li><a href="#">Rates</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</header>

And then use css media queries to style your page for smaller screens.

header ul {
    width: 100%;
    font-size: 0;
    text-align: center;
}

header ul li {
    font-size: 16px;
    display: inline-block;
    width: 19%;
    min-width: 7em;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
@media all and (max-width: 564px) and (min-width: 100px){
    header ul li {
        width:100%;
        display:block;
    }
}

Here is a fiddle http://jsfiddle.net/Jk8Nr/6/

Answer 4

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/​