gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:06:01 25 4
gpt4 key购买 nike

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

最佳答案

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

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

demo


表格默认是自动的,所以它会随着内容的增加而增加宽度,通过设置为 fixed 将固定宽度。

关于html - 为平板电脑垂直对齐三个表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19585059/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com