使 HTML 表格内联答案

【问题标题】：Making an HTML Table Inline使 HTML 表格内联
【发布时间】：2017-07-14 02:12:25
【问题描述】：

我正在尝试并排放置两张桌子：

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

但是我分配给 inline 的显示属性的值从 inline-table 到 inline 再到 inline-block 都不起作用，所以我很难过，希望得到任何建议。我只发现了另一个相关问题：How do I make an HTML table inline，不幸的是，解决方案不起作用。

【问题讨论】：

您能否向我们展示更多您的 HTML，例如表格的内容？
可能重复：stackoverflow.com/q/11690223/617996
内联块和内联表都对我有用。 jsfiddle.net/gkcuA
向我们展示inline-table 不适合您的可重现案例的代码（和小提琴）。并告诉我们您必须兼容哪些版本的 IE。
如果您尝试在 css 文件中设置表格样式，请同时包含您的 css 代码。

标签： css html-table

【解决方案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/

【讨论】：

【解决方案2】：

不应该是：

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

应该是：

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

【讨论】：

内联样式比使用类更好？真的吗？
我同意，最好使用样式表。更重要的是，显示inline 提供了与inline-block 不同的布局。
不，从来没有暗示它是......没有给出css，所以我正在使用给出的内容。它可能不起作用的一个原因是因为它的声明不正确，例如我说的是 class="inline"，而不是 style="display:inline"。