(Responsive) Table width does not match container inside iframe on ios safari

Question

I have a problem displaying a table inside an iframe on an iPhone safari. Here is an example: http://jsfiddle.net/qb86ojms/

If you run it on a desktop browser (with a smaller size) or chrome android, it works well. The table will not exceed its container. However, on the iphone, it does not work properly.

PS The way to create this responsive table is just an example that I found on google. I only use this because it’s easier for me to show the problem I am facing. I really use a loading table. In fact, none of the methods work on the iPhone. Therefore, I think it does not matter how responsive. The problem should be related to how to make the table width up to 100% match the width of the container.

Something I tried but does not work:

one.

table{ table-layout: fixed; } 

2. add overflow: hidden in the table.

3. change the width of the table to 100% after completing the loading of the iframe.

Answer 1

Based on this post, How to get IFrame to respond to iOS Safari?

I added to the stylesheet

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

And now it works on my iPhone 5.