Question

我目前正在为网络和iPhone设计一个网站。我遇到了一个问题，在iPhone上显示表格。

在我的电脑上，该表看起来很正常。我可以看到一切。但是在我的iPhone上，我只能看到两行，另外两行是不可见的，因为它们超出了屏幕。（没有滚动条）

我该怎么做，所以桌子会适合屏幕宽度？这是css：

我在css中使用@media。

这是表格的.css：

  .blacklist{
        width:100%;
    }

.blacklist thead th{
    border:1px solid #e2e2e2;
    width:25%;    
}
.blacklist thead th img{
    width:72px;
    height:72px;
    float:left;
}
.blacklist thead .title{
    text-align:left;
    padding-top:23px;
    font-size:18px;
}
.blacklist tbody td{
    border:1px solid #e2e2e2;  
    padding:5px;  
}
.blacklist .button-holder{
        text-align:center;
        margin:7px;
}

以下是iPhone版的.css：

   .blacklist table{
        visibility:collapse;
    }
    .blacklist th{
        width:25%;  

    }
    .blacklist thead th img{
        display:none;
    }
    .blacklist thead th .title{
        text-align:center;
        padding:7px;
    }

我想......打破桌子..就像展示两个TH然后两个TD一样。在此之下，还有两个TH和两个TD。等等...

Answer 1

看看Responsive Data Table Roundup。这里没有完美的解决方案，但你可以找到灵感来解决你遇到的问题。

另外，为什么只在移动设备上开发iPhone呢？那里有数以百万计的其他设备值得拥有爱！

Answer 2

将单独的表放入div中并将div向左浮动。这会将表格水平放置在彼此旁边。

Answer 3

对我来说最好的是，除了删除font-size之外，还为表格启用水平滚动。示例：

HTML：

<div class="wrap">
    <table>
    ...
    </table>
</div>

CSS：

div.wrap { width: 100%; overflow-x: auto; }

在iPhone css上适合表

3 个答案: