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

Question

我有多个表显示为内联块元素。但是，我想修复宽度，以便它们超出水平空间，为每个表提供 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 次。

现在我似乎无法做到这一点。所有表格都具有类属性并设置为 33% 宽度，但似乎没有任何变化。

Answer 1

另一种可能是

'float: left'

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

小提琴

Answer 2

尝试这个

table
{
   float:left;
   width:33%;
}

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