css - 使 HTML 表格内联

Question

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

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

但是我分配给 inline 的 display 属性的值从 inline-table 到 inline 到 inline-block 都不起作用，所以我很难过，希望得到任何建议。我只发现了另一个相关问题：如何使 HTML 表格内联，不幸的是，解决方案不起作用。

Answer 1

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

<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>