1

我的问题很简单。

首先，看一下这段代码：

http://jsfiddle.net/Jk8Nr/

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

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

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

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

更新

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

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

4

4 回答 4

2

添加

border-collapse: separate;

到你的 TABLE 风格

和

display: inline-block;

到您的 TD/TH 风格...

干杯。

于 2012-08-27T19:37:44.883 回答
1

我强烈建议为此使用列表，您认为合适的顺序或无序；如果只是因为语义（导航菜单是您可能希望去的页面列表），而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 小提琴演示。

于 2012-08-27T19:45:25.893 回答
0

请使用一些这样的语义标记：

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

于 2012-08-27T19:44:38.810 回答
0

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

于 2012-08-27T19:57:18.347 回答