1

我正在尝试对齐 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>

我已经尝试给每个单元格一个最大宽度，但它似乎没有用。没有默认的解决方案吗？

提前致谢。

编辑：

我希望它像这样对齐：http: //i.imgur.com/Cipa9f6.png

4

1 回答 1

1

您需要将表格布局设置为固定，然后只有宽度才能按预期工作。

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

演示

表格默认为自动，因此它会随着内容的增加而增加宽度，并且通过设置为固定宽度将是固定宽度。

于 2013-10-25T08:42:32.713 回答