Question

我有两个HTML表格，我想并排放置。

我已经看过以前的答案，他们提到你需要指定内联块并将其向左浮动。

以下是我的两张桌子的示例。但是它仍然显示另一张桌子，为什么？

"<table style ='font-size: 10pt; float: left; display: inline-block; cellpadding='3'>"

Answer 1

不要在表上使用inline-block，因为它会改变其行为（如果您需要vertical-align之类的规则）。但您可以使用float: left;并禁用之后的浮动。以下是示例：jsFiddle

Answer 2

你的错误就在这里......

在第一个表格中，您必须指定display:inline-block，在第二个表格中使用float:left就像这样......

请参阅完整视图中的代码:::

＆＃13;

   

    <table border="1" style="display: inline-block;">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 style="float:left;" cellpadding="3">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

<hr>

＆＃13;

Answer 3

您忘了在'和inline-block;

之间添加cellpading

示例：

<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 4

根据经验说明，不要直接在表格元素上设置float或display等样式。这可能会导致意外行为，尤其是处理不同版本的浏览器。而是使用div元素作为表容器，并在容器上设置样式。

<div class="table-container"><table></table></div>
<div class="table-container"><table></table></div>

并设置样式

.table-container { display: inline-block; vertical-align: top; }

把两张桌子放在一起

4 个答案: