如何并排显示表格[重复]

Question

这是当前显示的样子：

这就是我想要的样子：

.d1{
  background:#F0F0F0;
  border: 1px solid #A4A4A4;
}


#designs input, #itemz input{
  height:19px;
  font-size: 15px;
}

#designs #fds_image {
  background-size: 190px 221px;
  height: 221px;
  width: 190px;
  overflow:hidden;
}

#designs #fds_image img{
  width: 190px;
}

<table id="designs" width="auto" align="center" border="0" bgcolor="#EBEBEB" cellspacing="5">
  <tbody>
    <tr>
      <td class="d1" name="item">
        <div id="fds_image">
          <button class="preview_switch">M</button>
        </div>
        <hr>
        <div class="bottom_bar">
          <button name="preview" data-original="m">Preview</button>
          <br>
          <tbody>
            <td class="d1" name="item">
              <div id="fds_image">
                <button class="preview_switch">M</button>
              </div>
        </div>
        <hr>
        <div class="bottom_bar">
          <button name="preview" data-original="m">Preview</button>

我尝试了很多事情并在网上进行了研究，但由于某种原因，它不起作用。我怎样才能让表格并排显示，就像我展示的那样？

Answer 1

您可以将默认的display: table 覆盖为inline-table。

table {
  display: inline-table;
}

水平对齐多个<table> 元素的示例。

body {
  text-align: center;
}
table {
  width: 100px;
  height: 200px;
  border-collapse: collapse;
  display: inline-table;
}
td {
  border: 1px solid grey;
}
tr:first-child {
  height: 100%;
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
    </tr>
    <tr>
      <td><button>Button</button></td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td>Content</td>
    </tr>
    <tr>
      <td><button>Button</button></td>
    </tr>
  </tbody>
</table>

Answer 2

您可以尝试浮动表格。

table {
 float: left;
}

Answer 3

您可以制作一个更大的桌子，将您当前的两张桌子并排放置。

<table style="margin: auto;">
<tbody>
<tr>
<td><!-- Your first table --></td>
<td><!-- Your second table --></td>
</tr>
</tbody>
</table>