如何在div中对齐2个表（左侧和中间）？

Question

我想将一个表居中于div中，并将另一个表浮动到第一个表的左侧。 我想要的结果看起来像这样：

[ (Left Table)     (Center table)               ]

但是使用我当前的HTML和CSS（见下文），我得到了这个结果：

[ (Left Table)           (Center table)         ]

这里的问题是它将第一个表浮动到左侧，并将第二个表放在剩余空间中。

这是代码：

#wrapper {
        text-align: center;
}

#left {
    float:left;
}

#center {
    margin: 0 auto;
}

<div id="wrapper">
    <table id="left"></table>
    <table id="center"></table>
</div>

    

有关如何修复它的任何帮助吗？

Answer 1

对第一个表尝试position:absolute; left:0px;，为包装器

尝试position:relative;

body{
    margin:0px;
    padding:0px;
}

#wrapper {
    text-align: center;
    border:1px solid #ddd;
    position:relative;
   
}
#left {
    position:absolute;
    left:0px;
    /*
    float:left;*/
}
#center {
    margin: 0 auto;
    
}

<div id="wrapper">
    <table id="left" border="1">
      <tr>
        <td>table1</td>
      </tr>
    </table>
    <table id="center" border="1">
      <tr>
        <td>table2</td>
      </tr>
    </table>
</div>

Answer 2

尝试将#wrapper设为position: relative;，将#left设为position: absolute; left: 0;

#wrapper {
  text-align: center;
  background-color: skyblue;
  text-align: left;
  position: relative;
}
table {
  border: 1px solid black;
}
#left {
  background-color: red;
  position: absolute;
  left: 0;
}
#center {
  background-color: yellow;
  margin: 0 auto;
}

<div id="wrapper">
  <table id="left">
    <tr>
      <td>Left Table</td>
    </tr>
  </table>
  <table id="center">
    <tr>
      <td>Center Table</td>
    </tr>
  </table>
</div>

Answer 3

＆＃13;

＆＃13;

.table-container {
  float: left;
  position: relative;
  width: 100%;
}
table {
  float: left;
  width: 100px;
  border:1px solid #ddd;
}
.tbl2 {
  position: absolute;
  top: 0;
  left: calc(50% - 50px);
}

＆＃13;

<div class='table-container'>
  <table class='tbl1'>
    <td> Hello </td>
  </table>
  <table class='tbl2'>
    <td> Hello </td>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;