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

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

Answer 3

我在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样式中的任何一种都会产生不合适的格式。

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>

Answer 5

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

（您可以尝试使用W3C验证程序以了解有关此错误的更多信息）

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

如何内联HTML表格

5 个答案: