Question

我的问题很简单。

首先，请看一下这段代码：

http://jsfiddle.net/Jk8Nr/

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

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

我不介意使用<ul><li>代替表格，但我确实希望能够这样做。

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

更新

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

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

Answer 1

添加

border-collapse: separate;

到你的TABLE风格

和

display: inline-block;

到您的TD / TH-Style ......

欢呼声。

Answer 2

我强烈建议您根据自己的需要使用此列表，有序或无序;如果只是因为语义（导航菜单是您可能希望去的页面列表），而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 3

请使用这样的语义标记：

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

Answer 4

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

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

更新

4 个答案: