HTML - 并排的两个表

Mat*_*kes 31 html html-table

可能重复:
尝试将表格彼此相邻水平

我已经创建了两个html表.如何将它们并排放置而不是一个放在另一个之上?

Chr*_*ker 86

根据您的内容和空间,您可以使用浮动或内联显示:

<table style="display: inline-block;">

<table style="float: left;">
Run Code Online (Sandbox Code Playgroud)

在这里查看:http://jsfiddle.net/SM769/

文档

  • 我不认为将[`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display)设置为内联块应该是接受的答案,因为'<table >'element应明确将'display'属性设置为'table'.否则,它的行为与表格完全不同. (3认同)

jay*_* c. 9

您可以将表放在div中并为表添加样式"float:left"

<div>
  <table style="float: left">
    <tr>
      <td>..</td>
    </tr>
  </table>
  <table style="float: left">
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

或者只是使用css:

div>table {
  float: left
}
Run Code Online (Sandbox Code Playgroud)

  • 正如我在themhz的答案中提到的那样,包装div不是必需的.通常,人们试图使用尽可能少的标签来实现期望的呈现. (4认同)

the*_*mhz 6

<div style="float: left;margin-right:10px">
  <table>
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>
<div style="float: left">
  <table>
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 不需要包装 div - 您可以自己浮动表格。添加 div 只会不必要地添加更多标记。 (2认同)