表列间距占用最后的空间而不使用colspan
提问于 2017-12-12 19:55:58
我有一张四排的桌子。在第1行内有1列。第2行的内部有3列。第3行的内部有2列。在第4行内有2列。第1行的列跨度为3，因此该列跨越整个表，但在第3和第4行中，我希望这两列平均分布到表的整个宽度。问题是，我不能再加上一个1.5的大跨度，它就是不起作用。我的问题是，如何使第3行和第4行的列在偶数情况下平均跨越表？
我的代码是：
<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
<tr>
<td colspan="3">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
<tr>
<td>
<button style="width: calc(100%);">Button</button>
</td>
<td>
<button style="width: calc(100%);">Button</button>
</td>
<td>
<button style="width: calc(100%);">Button</button>
</td>
</tr>
<tr>
<td colspan="1.5">
<button style="width: calc(100%);">Button</button>
</td>
<td colspan="1.5">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
<tr>
<td colspan="1.5">
<button style="width: calc(100%);">Button</button>
</td>
<td colspan="1.5">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-13 00:01:38
一张12室宽的桌子怎么样？12可以用所需的所有列宽来计算。
第1行colspan 12 -1柱
第2行学院跨度4-3柱
第3行短柱6-2柱
第4行学院跨度6-2柱
<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
<tr>
<td colspan="12">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
<tr>
<td colspan="4">
<button style="width: calc(100%);">Button</button>
</td>
<td colspan="4">
<button style="width: calc(100%);">Button</button>
</td>
<td colspan="4">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
<tr>
<td colspan="6">
<button style="width: calc(100%);">Button</button>
</td>
<td colspan="6">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
<tr>
<td colspan="6">
<button style="width: calc(100%);">Button</button>
</td>
<td colspan="6">
<button style="width: calc(100%);">Button</button>
</td>
</tr>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47785234
复制相关文章
腾讯云开发者
