title: Table Height different between Ipad and Laptop (using html <iframe>
body: <p>I create a website by using <a href="http://en.wikipedia.org/wiki/Wix.com" rel="nofollow">wix</a>. To put tables on my website, I used the html widget. 
  However, there is height limit on the html widget, so I have to split some of my tables into 2 parts. The problem is the height of my tables change between ipad and laptop, it turns out that text overlapped between tables on the ipad. To avoid text overlapping, I have to leave big gap between tables on my laptop. Does anyone know how to solve it?</p>
  
  <p>The pictures below are the screenshots of my ipad and laptop.
  <a href="https://dl.dropboxusercontent.com/u/39965960/2013-11-16%2004.12.01.png" rel="nofollow">https://dl.dropboxusercontent.com/u/39965960/2013-11-16%2004.12.01.png</a>
  <a href="https://dl.dropboxusercontent.com/u/39965960/abnormal.png" rel="nofollow">https://dl.dropboxusercontent.com/u/39965960/abnormal.png</a></p>
  
  <p>The html code of my table width and my  code are as below</p>
  
  <pre><code>&lt;STYLE type="text/css"&gt;
                  body,td,th {
                      font-family: Verdana, Verdana, Verdana;
                      font-size: 12px;
                  }
                  &lt;/STYLE&gt;
                  &lt;table width=900 border="1" cellspacing="0" style='table-layout:fixed'&gt;
                  &lt;col width="11%"&gt;
                  &lt;col width="11%"&gt;
                  &lt;col width="33%"&gt;
                  &lt;col width="16%"&gt;
                  &lt;col width="16%"&gt;
                  &lt;col width="6%"&gt;
                  &lt;col width="7%"&gt;
                  &lt;col width="7%"&gt;
  
                  &lt;tr bgcolor="#00aaaa"&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
  
      &lt;style type="text/css" media="screen"&gt;
  
          body,
          html {
              width: 100%;
              height: 100%;
              overflow: hidden;
          }
  
          * {
              padding: 0;
              margin: 0;
          }
  
          iframe {
              width: 100%;
              height: 100%;
              overflow: hidden;
              border: none;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;iframe src="https://googledrive.com/host/0B5mkUGmS3zi7T1hiRTZ2OEVTb0U/Edu_iframe_1_1.html" scrolling="no"&gt;&lt;/iframe&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>