1

我目前正在为网络和 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。等等...

4

3 回答 3

2

看看响应式数据表综述。这里没有完美的解决方案，但您可以找到解决您遇到的问题的灵感。

另外，为什么只在移动设备方面为 iPhone 开发？还有数以百万计的其他设备也值得爱！

于 2012-06-06T11:30:11.027 回答
1

The best that worked for me is, beside decrasing font-size, is enabling the horizontal scroll for the table. Example bellow:

HTML:

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

CSS:

div.wrap { width: 100%; overflow-x: auto; }
于 2015-06-29T03:20:35.263 回答
0

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

于 2012-06-06T10:45:57.027 回答