Выравнивание трех таблиц по вертикали для таблиц

Question

Я пытаюсь выровнять 3 таблицы, чтобы они составляли 1 большую таблицу. Причина, по которой я хочу сделать это, - это то, что я хочу иметь прокручиваемую таблицу, которая работает на планшетах (ipad, android). Я уже получил эту работу, единственное, что мне еще нужно сделать, это выровнять верхние и нижние колонтитулы с содержимым. Мой план таблицы выглядит так:

<!-- Fixed header table --> 
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive"> 
<thead> 
    <th> Header 1 </th> 
    <th> Header 2 </th> 
    <th> Header 3 </th> 
</thead> 
</table> 
<!-- Scrollable content table --> 
<div class="scroll"> <!-- This div enables the table to be scrollable --> 
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive"> 
    <thead> <!-- Use a thead or JQuery Mobile 1.4 gets mad --> 
    <tr> </tr> 
    </thead> 
    <tbody> 
    <!-- This is dynamically filled --> 
    </tbody> 
</table> 
</div> 
<!-- Fixed footer table --> 
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive"> 
<thead> 
    <tr> </tr> 
</thead> 
<tfoot> 
    <tr> 
    <td> Footer 1 </td> 
    <td> Footer 2 </td> 
    <td> Footer 3 </td> 
    </tr> 
    </tfoot> 
</table> 

Я уже пытался дать каждой ячейке максимальную ширину, но она, похоже, не работала. Разве это не решение по умолчанию?

Заранее спасибо.

Edit:

Я хочу, чтобы быть выровнены так: http://i.imgur.com/Cipa9f6.png

Answer 1

Вам нужно установить настольный макет быть фиксировано, то только ширина работает, как ожидалось.

table{ 
    table-layout: fixed; 
} 
th,td{ 
    width: 50px; 
} 

demo

---

таблица имеет авто по умолчанию, так что увеличит ширину, как ваше содержание увеличивается, и установив на фиксированную для будет фиксированной шириной.