(Responsive)Table Width does not fit the container

问题:

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

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. 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.

Something I have tried but does not work:

1.

table{
     table-layout: fixed;
}

2. add overflow: hidden to the table.

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

回答1:

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

I added to the stylesheet

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

And it now works on my iPhone 5.