it-swarm.cn

如何内联HTML表格

在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

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

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

16
oz1cz

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

3
Will

你可以使用以下css:

display:inline-table

仅IE7及以下版本不支持此属性。将表格包装在一个带有zoom:1的范围中可能会有助于IE7。

25
Spadar Shut

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

2
Doctor Jonesington

我想你有充分的理由在这里使用表而不是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>
0
natedavisolds