Question

我有两张桌子，我希望它们并排显示，因此我在CSS中使用了道具(display: inline-block;);

但问题是第二个表浮动在第一个表结束的底部。即第一和第二桌底都在同一条线上，而我希望两个表的第一行出现在同一行。

(display: inline-block;)

Answer 1

不完全确定你要问的是什么，但要确保表格不会太大而不能一起浮动。这是一个例子：

body {
  padding: 0;
  margin: 0;
}
table {
  width: 50vw;
  background-color: blue;
  height: 50vw;
  outline: 1px solid black;
  float: left;
}

table:nth-of-type(1) tr {
  width: 30vw;
  background-color: red;
  height: 10vw;
  outline: 1px solid black;
}

table:nth-of-type(2) tr {
  width: 30vw;
  background-color: yellow;
  height: 10vw;
  outline: 1px solid black;
}

<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Answer 2

你可以像这样创建并排表。

以下示例

jsfiddle示例

<强> jsfiddle

.left {
  display: inline-block;
}

.right {
  display: inline-block;
}

<div class="left">
  <table border=1 width=100%>
    <tr>
      <td>HELLO</td>
      <td>HELLO</td>
      <td>HELLO</td>
    </tr>
  </table>
</div>
<div class="right">
  <table border=1 width=100%>
    <tr>
      <td>HELLO</td>
      <td>HELLO</td>
      <td>HELLO</td>
    </tr>
  </table>
</div>

将两张桌子并排放在顶部，然后将第二张桌子放在html

2 个答案: