在一行上固定多个表格的宽度

Posted 2023-03-06

【中文标题】在一行上固定多个表格的宽度

【英文标题】：Fixing the width on multiple tables on one line

【发布时间】：2012-10-31 06:59:33

【问题描述】：

我有多个表格显示为内联块元素。但是，我想修复宽度，以便它们超出水平空间，为每个表提供 33% 的宽度（每行 3 个表）。示例代码如下：

<table>
<thead>
<tr><th></th><th></th><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>

...重复以上代码 2 次。

现在我似乎无法正确处理。所有的表格都有 class 属性并设置为 33% 宽度，但似乎没有任何变化。

【参考方案1】：

试试这个

table

   float:left;
   width:33%;

在百分比中，您必须解决填充、边距和边框问题，并根据需要减少它。您可能需要将 display:inline-block 添加到 3 个表的容器中

【讨论】：

打破页面。将所有表格单独发送到一行。

不。无论如何，我在 IRC 上找了人来帮助我，在摆弄了一些 div 类之后，我得到了它的工作。当然，你解决了一件事，你带来了另一个问题，但我会把它保存到另一个线程。还是谢谢。

【参考方案2】：

其他可能性是

'float: left'

因此您不必将宽度设置为几乎 33.3%。 只需确保您在表格的父元素上有一个 Clearfix。

Fiddle