如何并排显示表格

Question

这是目前显示的方式：

这就是我想要的样子：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我尝试做很多事情并在网上进行研究，但出于某种原因，它无法正常工作。如何让桌子并排展示，就像我已经展示过一样？

Answer 1

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

table {
  display: inline-table;
}

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

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>