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

表格默认为自动，因此随着内容的增加会增加宽度，设置为固定为固定宽度。

平板电脑垂直对齐三个表格

1 个答案: