制作一个表格,每行4个单元格,通过将第三个和第四个单元格移动到一个新行来响应

时间:2015-08-03 09:37:38

标签: html css

这是原始表格(fiddle Example):

Title    | BookABC  | Author    | Peter
Category | Religion | Publisher | ABC Publisher

<table class="infoTab">
    <tbody>
        <tr>
            <td>Title</td>
            <td>Book ABC</td>
            <td>Author</td>
            <td>Peter</td>
        </tr>
        <tr>
            <td>Category</td>
            <td>Religion</td>
            <td>Publisher</td>
            <td>ABC Publisher</td>
        </tr>
    </tbody>
</table>

我想让桌子在移动设备上做出响应。有没有办法将第三个和第四个单元格移动到它自己的行中,所以在移动视图中它将成为:

   Title    | ABC ABC  
   Author   | Peter
   Category | Religion
   Publisher| ABC Publisher

如何使用css实现这一目标?小提琴示例并非使用display: inline-blockwidth:50%。它将每个单元格变成自己的一行,如下所示:

Title
Book ABC

Author
Peter

Category
Religion

Publisher
ABC Publisher

Css代码:

.infoTab{    
    font-size: 14px;
    border-spacing: 0;
    text-align: left;
    width:90%
}
.infoTab td:nth-child(odd) {
    font-weight: bold;
}
.infoTab td{   
    width: 25%;
    text-transform: capitalize;
    background-color: #EFEFEF;
    border-bottom: #ccc 1px solid;
    padding: 4px;
    position: relative;
    vertical-align: top;
    max-width: 700px;
    color: #4D6679;}

@media  only screen and (max-width: 525px) {
   .infoTab td{ 
        width: 50%;
        display: inline-block;
    }
    .infoTab td:nth-child(3){display:block}
    .infoTab td:nth-child(4){display:inline-block}
}

1 个答案:

答案 0 :(得分:1)

问题是CSS宽度,它排除了填充和边框。也就是说,50%宽的单元格的实际宽度为50%加上8px的填充加上2px的边框。因此,两个细胞不适合一条线!两个单元之间也有一个空间。

因此,解决方案是将{idCompany}设置为在宽度中包含填充和边框,并添加@PathParam以消除空间。
请参阅new fiddle

然而。

表的标记不好。
首先,您不应该仅仅因为布局看起来很好而在表行中放置任意数量的单元格。这不是表格的用途。
其次,包含属性名称而不是值的单元格应为box-sizing: border-box个单元格,而不是float: left

这就是表格的样子:每行两个单元格,thtd来显示一条数据。
然后翻转css的逻辑,使其看起来像在窄屏幕上设计(有两列),但在更宽的屏幕上扩展到四列。

此方法的另一个优点是您可以将其扩展为在非常宽的屏幕上显示四列以上。

&#13;
&#13;
th
&#13;
td
&#13;
&#13;
&#13;