这是原始表格(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-block
和width: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}
}
答案 0 :(得分:1)
问题是CSS宽度,它排除了填充和边框。也就是说,50%宽的单元格的实际宽度为50%加上8px的填充加上2px的边框。因此,两个细胞不适合一条线!两个单元之间也有一个空间。
因此,解决方案是将{idCompany}
设置为在宽度中包含填充和边框,并添加@PathParam
以消除空间。
请参阅new fiddle。
然而。
表的标记不好。
首先,您不应该仅仅因为布局看起来很好而在表行中放置任意数量的单元格。这不是表格的用途。
其次,包含属性名称而不是值的单元格应为box-sizing: border-box
个单元格,而不是float: left
。
这就是表格的样子:每行两个单元格,th
和td
来显示一条数据。
然后翻转css的逻辑,使其看起来像在窄屏幕上设计(有两列),但在更宽的屏幕上扩展到四列。
此方法的另一个优点是您可以将其扩展为在非常宽的屏幕上显示四列以上。
th
&#13;
td
&#13;