如何将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

我尝试使用不同的显示样式，但似乎没有一个能做到我想要的。

我是否被迫使用嵌套表格的代码，还是我忽略了什么东西？

- oz1cz

---

哪个浏览器（和版本）呈现了您展示的第二个示例？[不是我的=)] - Shad

我应该提到我的 Doctype 是 XHTML 1.0 Strict。这个问题在 HTML 4.01 Transitional 中没有出现。 - oz1cz

Answer 1

您可以使用以下CSS：

display:inline-table

只有IE7及以下版本不支持此属性。可能将表格包裹在应用了zoom:1的span中可以帮助IE7。

- Spadar Shut

---

这应该是首选答案。它不需要任何外部元素上下文。 - Steven

Answer 2

我正在Linux上使用Chrome浏览器，并且通过在段落（p）和表格标签中添加display:inline-table，使其正常工作：

<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，看起来它也可以正常工作。

提醒一下：删除两个display:inline-table样式中的任何一个都会导致不良格式。

- Doctor Jonesington

Answer 3

将段落的样式设置为display: inline;对我来说有效。但是，如果你有多个段落，你需要在每个段落后面加上<br />。

- Will

---

我应该提到我的 Doctype 是 XHTML 1.0 Strict。你的解决方案在 XMTHML 1.0 Strict 中运行良好（甚至没有 <br/>）；但我希望能够在不修改周围段落样式的情况下实现我想要的效果。但也许我做不到。 - oz1cz

我认为你不能这样做，因为段落默认情况下不是内联元素。 - Will

Answer 4

我想你在这里使用表格而不是CSS应该有充分的理由。 你可以使用一个单独的表格来实现这个效果。

<table>
  <tr>
    <td rowspan="2">Before</td>
    <td>a</td>
    <td>b</td>
    <td rowspan="2">After</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

- natedavisolds

---

这对我不起作用，因为“之前”和“之后”的文本实际上是几行文本，并且小表格出现在段落中间。 - oz1cz

Answer 5

它不起作用是因为<table>不应该是<p>的子元素

（您可以尝试使用W3C验证器查看更多有关此错误的信息）

只需将<p>替换为<div>

- simplyPTA