爲平板電腦垂直對齊三張桌子

Question

我想對齊3個桌子，因此它們形成一個大桌子。 我想這樣做的原因是因爲我想有可以在平板電腦上工作的可滾動表格（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> 

我已經嘗試給每個單元格一個最大寬度，但它似乎沒有工作。 這是不是有一個默認的解決方案？

在此先感謝。

編輯：

我希望它是這樣排列： http://i.imgur.com/Cipa9f6.png

Answer 1

您需要設置表格的佈局是固定的那麼只有寬度按預期工作。

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

demo

---

表默認情況下具有自動所以它會增加寬度爲您的內容增加，通過設置固定於將固定的寬度。