在带有表格的DIV内部水平滚动

Question

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

<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

用table包裹每个div并使用以下css

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

<强> DEMO

Answer 2

试试这个 overflow: auto; overflow-y: hidden;