html - 容器中并排的两张 table 不会漂浮

Question

我在尝试将两个表格彼此相邻放置在一个应该可以水平滚动(x 轴)的 div 中时遇到问题。

当放置在容器 div 外部时，表格会完美地并排 float ，但当放在容器内时，第一个表格后会出现中断。

.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

问题是你没有给你的table一个width，

另外，我更改了您的 table 属性:

table {
 display:table;
 float:left;
}

到

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

检查下面的片段:

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

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