html - 带表格的 DIV 内的水平滚动

Question

我在一个 div 中有三个表。当表格的大小增加时，我需要水平和垂直滚动。垂直滚动正在发生，但水平滚动没有发生。第三张 table 在下一行，而不是其他 table 。我使用三个表而不是一个表来进行响应式设计。

<div style="height:250px; width:550px; overflow-x:scroll; overflow-y: scroll; white-space:nowrap;">
    <table border="1" style="float:left; table-layout:auto;">
        <thead>
            <tr>
                <th>Pin Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111111111111111111111111111</td>
            </tr>
        </tbody>
    </table>  
    <table border="1" style="float:left; table-layout:auto;">
        <thead>
            <tr>
                <th>Pin Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>222222222222222222222222222</td>
            </tr>
        </tbody>
    </table>  
    <table border="1" style="float:left; table-layout:auto;">
        <thead>
            <tr>
                <th>Pin Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>444444444444444444444444444</td>
            </tr>
        </tbody>
    </table>  
</div>

Answer 1

用 div 包裹每个 table 并使用下面的 css

.wrapper{
  height:250px; 
  width:550px; 
  overflow:scroll; 
  white-space:nowrap;
}
.wrapper div{
  display:inline-block;
}

DEMO