title: Aligning three tables vertically for tablets
body: <p>I'm trying to align 3 tables so they form 1 big table.
  The reason I want to do this is because I want to have scrollable table which works on tablets(ipad, android). I already got this working the only thing I still need to do is align the headers and footers with the content. My table layout looks like this :</p>
  
  <pre><code>&lt;!-- Fixed header table --&gt;
  &lt;table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive"&gt;
   &lt;thead&gt;
      &lt;th&gt; Header 1 &lt;/th&gt;
      &lt;th&gt; Header 2 &lt;/th&gt;
      &lt;th&gt; Header 3 &lt;/th&gt;
   &lt;/thead&gt;
  &lt;/table&gt;
  &lt;!--  Scrollable content table --&gt;
  &lt;div class="scroll"&gt; &lt;!--  This div enables the table to be scrollable --&gt;
   &lt;table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive"&gt;
    &lt;thead&gt; &lt;!--  Use a thead or JQuery Mobile 1.4 gets mad --&gt;
      &lt;tr&gt; &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;!--  This is dynamically filled --&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;
  &lt;!--  Fixed footer table --&gt;
  &lt;table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive"&gt;
   &lt;thead&gt; 
     &lt;tr&gt; &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tfoot&gt;
    &lt;tr&gt;
     &lt;td&gt; Footer 1 &lt;/td&gt;
     &lt;td&gt; Footer 2 &lt;/td&gt;
     &lt;td&gt; Footer 3 &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I already tried to give every cell a max width but it didn't seem to work.
  Isn't there a default solution for this ?</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I want it to be aligned like this :
  <a href="http://i.imgur.com/Cipa9f6.png" rel="nofollow">http://i.imgur.com/Cipa9f6.png</a></p>