如何内联HTML表格

Question

在HTML中我想显示一个小表作为段落的一部分.一种方法是:

<table>
  <tr>
    <td>
      Before 
      <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table>
      After
    </td>
  </tr>
</table>

这产生了这个漂亮的布局:

       a b
Before     After
       c d

这正是我想要的.

但是,当我真正想要的是在一个段落中使用一个表时,在表格中使用表格似乎相当愚蠢.但是,如果我尝试使用此HTML:

<p>
  Before 
    <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

我得到这个丑陋的布局:

Before
a b
    After
c d

我尝试过使用各种不同的显示样式,但似乎都没有做我想要的.

我被迫使用表内代码,还是我遗漏了什么？

Answer 1

你可以使用以下css:

display:inline-table

仅IE7及以下版本不支持此属性.将表格包裹在zoom:1适用于它的跨度中可能有助于IE7.

Answer 2

我在 Linux 上使用 Chrome 浏览器，并且可以通过添加display:inline-table段落 (p) 和表格标签来使其工作：

<p style="display:inline-table;">
  Before
  <table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

刚刚检查了 Linux 上的 Firefox，它似乎也可以在 Linux 上运行。

仅供参考：删除这两种display:inline-table样式中的任何一种都会产生不良的格式。

Answer 3

使该段落display: inline;对我有用。但是，如果您有多个段落，则必须<br />在每个段落后添加 。