（响应）表格宽度不适合ios safari中iframe内的容器 [英] (Responsive)Table Width does not fit the container inside iframe on ios safari

问题描述

我在iPhone的游戏中遇到iframe内部渲染表的问题。
以下是示例：
http://jsfiddle.net/qb86ojms/

I have an issue of rendering table inside iframe on iPhone's safari. Here is the example: http://jsfiddle.net/qb86ojms/

如果你在桌面浏览器（体积较小）或android chrome上运行它，它运行良好。该表不会超过其容器。
但是，在iphone上，它无法正常工作。

If you run it on desktop browser (with smaller size) or android chrome, it works well. The table won't exceed its container. However, on iphone, it doesn't work correctly.

P.S。创建此响应表的方法只是我在谷歌上找到的一个例子。我使用它只是因为我更容易显示我遇到的问题。我实际上使用bootstrap响应表。事实上，这两种方式都不适用于iPhone。因此，我认为表的响应性并不重要。问题应该更多地是关于如何强制表格宽度达到100％以匹配容器的宽度。

P.S. The way to create this responsive table is just an example I found on google. I use this just because it is easier for me to show the problem I encountered. I actually use bootstrap responsive table. In fact, neither way work on iPhone. Therefore, I think it does not matter how table is responsive. The problem should be more about how to force the table width to 100% to match the container's width.

我尝试但不起作用的东西：

1。

table{
     table-layout: fixed;
}

1. add溢出：隐藏在桌面上。

1. add overflow: hidden to the table.

在iframe完成加载后将表格宽度调整为100％。

resize table width to 100% after the iframe finished loading.

推荐答案

根据这篇文章，

Based on this post, How to get an IFrame to be responsive in iOS Safari?

我添加到样式表

iframe {
   width: 1px;
    min-width: 100%;
    *width: 100%;
}

它现在适用于我的iPhone 5.

And it now works on my iPhone 5.

这篇关于（响应）表格宽度不适合ios safari中iframe内的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！