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

Question

我的问题很简单。

首先，看看这段代码：

http://jsfiddle.net/Jk8Nr/

我只有一个非常简单的表，有一些填充，边框，文本对齐。

如果您访问上面的jsFiddle，您可以增加结果窗口的宽度，并且所有表项都将舒适地放置。但是，如果减小所述窗口的宽度，我希望表格单元格按顺序移动第二行，以便不需要横向滚动。

我不介意使用<ul><li>而不是表格，但我确实希望能够做到这一点。

如果有人熟悉解决方案，请告诉我。我不介意使用jQuery / JS / CSS，但我不熟悉其他的东西。

更新

这是更新的jsFiddle与工作解决方案：

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

Answer 1

我同意其他海报建议您使用列表而不是表格。然后，如果您希望对布局进行该级别的控制，则可以使用媒体查询强制在给定设备宽度处进行换行。这是一个设置600px断点的示例（标记然后是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/

Answer 2

加

border-collapse: separate;

你的TABLE风格

和

display: inline-block;

你的TD / TH风格......

干杯。

Answer 3

我强烈建议您根据自己的需要使用清单，有序或无序;如果只是因为语义（导航菜单是你可能希望去的页面列表），而table应该以表格格式呈现数据。那就是说，我建议：

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

使用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 4

请使用这样的语义标记：

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

然后使用css媒体查询为较小的屏幕设置页面样式。

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;
    }
}

这是一个小提琴http://jsfiddle.net/Jk8Nr/6/