適合iPhone上的表格css

我目前正在爲web和iPhone設計一個網站。我遇到了一個問題，在iPhone上顯示錶格。適合iPhone上的表格css

在我的電腦上，表看起來很正常。我可以看到一切。但是在我的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。等等......

來源

2012-06-06 oliverbj

可以顯示結果的畫面，你會滿意嗎？ –

這是一個基於表格的佈局嗎？ *不寒而慄* – cchana

看看Responsive Data Table Roundup。這裏沒有完美的解決方案，但您可以找到靈感來解決您遇到的問題。

此外，爲什麼只針對iPhone開發移動設備？還有數百萬的其他設備也值得愛！

來源

2012-06-06 11:30:11 Luca

這是我需要的！謝謝！ P.s.對不起，通過iPhone我一般意味着智能手機。對不起，他們都需要愛，的確如此！ – oliverbj

將單獨的表格放入div中，並將左側的div浮動。這將把桌子水平放置在彼此旁邊。

來源

2012-06-06 10:45:57

你能舉個例子嗎？ – oliverbj

這不是一個語義上有效的方法，並會現場一片狼藉屏幕閱讀器 – Luca

最適合我的工作是，除了decrasing字體大小之外，還爲表格啓用水平滾動。例如波紋管：

HTML：

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

CSS：

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

來源

2015-06-29 03:20:35 luizfelippe

適合iPhone上的表格css

回答

相關問題