容器中并排放置的两个桌子不会漂浮

Question

我在尝试将两个表彼此相邻放置在div中时遇到问题，该div应该是水平滚动的（x轴）。

当放置在容器div之外时，表完全相邻，但在容器内部，第一个表之后会发生中断。

.scroll-container {
    width: 200px;
    height: 100px;
    background: chocolate;
    overflow-x: scroll;
    overflow-y: hidden;
}

table {
    display: table;
    float: left;
}

tr:nth-of-type(even) {
    background-color: yellow;
}

<div class="scroll-container">
  <table>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  </table>
  <table>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
    <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  </table>
</div>

<p>without the scroll-container:</p>
<table>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
</table>
<table>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
  <tr><td>Dummy</td><td>Dummy</td><td>Dummy</td></tr>
</table>

Answer 1

问题是您没有向witdh提供table，

另外，我更改了table属性：

table {
 display:table;
 float:left;
}

到

table {
 display:table-cell;
 width:50% /* only if you need to be equal tables */
}

检查以下片段：

＆＃13;

＆＃13;

.scroll-container {
  width: 200px;
  height: 100px;
  background: chocolate;
  overflow-x:scroll;
  overflow-y: hidden;

}
table {
  display: table-cell;
  width:50% /* only if you need to be equal tables */
  
}
tr:nth-of-type(even) {
  background-color: yellow;
}

＆＃13;

<div class="scroll-container">
  <table>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
    <tr>
      <td>Dummy</td>
      <td>Dummy</td>
      <td>Dummy</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;