Question

我有一行，两个单元格表。简单。（在这里向下滚动http://staging.mragg.com/）现在，由于iPhone太宽，右侧单元格会被切断。有没有办法让正确的单元格下拉，只是在iPhone屏幕的左侧单元格下面？

（我知道如何定位iPhone已经......我只需要CSS代码，我想这会以正确的方式为较小的屏幕打破桌面......）

当前表格代码：

.bottom-table  {
background: #323232;
color: #FFFFFF;
border: none;
border-radius: 10px;
width: 80%;
text-align: center;
margin-right: auto;
margin-left: auto;
}

#bottomTable{
margin-top: -30px !important;
margin-bottom: 20px;
}

.bottom-table td {
border: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 40px;
vertical-align: top;
}

.bottom-table td:first-child {
border-right: 1px solid;
border-right-color: #FFFFFF;
}

Answer 1

如果您要显示表格数据，它应保留在行和列中。如果你不是，你可能不应该首先使用表格 - 考虑将其替换为有序列表或定义列表，或仅仅是几个<div>，并设置适合您的样式需要。 CSS现在足够强大，可以让HTML以您喜欢的方式显示，因此semantic HTML markup是首选的构建方式。

那就是说，做你想做的最简单的方法是：

.bottom-table td {
    float: left;
}

Answer 2

试试这个CSS代码：

@media only screen 
and (max-width : 480px) {
    .bottom-table td {
         display: inline-block;
         min-width: 200px;
    }
    .bottom-table td:first-child {
        border: none;
    }
}

在您当前的CSS下添加此CSS代码，并在480px下调整窗口大小以查看结果; - ）

创建一个响应式HTML表，以便右侧单元格可以移动到底部

2 个答案: