Question

我正试图并排放两张桌子：

<table class="inline">
</table>
<table class="inline">
</table>

但是我没有将内联表的显示属性分配给内联表内联到内联块工作的值，所以我很难过并且很感激任何建议。我只找到了另一个相关问题：How do I make an HTML table inline，遗憾的是解决方案无效。

Answer 1

默认情况下，表是块级元素，您需要更改display属性以获得每行两个或更多表，例如：

<table class="inline">
    <tr><td>First table row 1</td></tr>
    <tr><td>First table row 2</td></tr>
</table>
<table class="inline">
    <tr><td>Second table row 1</td></tr>
    <tr><td>Second table row 2</td></tr>
</table>

使用以下CSS：

.inline { 
    outline: 1px solid blue;
    width: 49%;
    display: inline-block;
}

您也可以使用inline-table，两者都会给出相同的结果。如果未设置宽度，则每个表将确定适合内容的最小宽度。如果设置宽度，则可以使两个表的宽度相同，这可能是合乎需要的。

如果您尝试display: inline，表格宽度将缩小以适合内容，这在某些应用程序中可能更为可取。在这种情况下，宽度设置将被忽略。

我在下面的小提琴中展示了三个案例。

小提琴参考：http://jsfiddle.net/audetwebdesign/m4fdG/

Answer 2

不应该是：

<table class="inline">
</table>
<table class="inline">
</table>

应该是：

<table style="display:inline">
</table>
<table style="display:inline">
</table>

制作内联HTML表格

2 个答案: