html - 具有多个表的 div 上的水平滚动条

Question

我在 DIV 元素中有多个表格，并希望在一定宽度上提供水平滚动条。如何在具有多个表的 div 上提供水平滚动条

    <div style="float:left; max-width:300px; min-width:50px; overflow-x:auto!important; white-space:nowrap;">
<table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left">
  <tr>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
  </tr>
  <tr>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
  </tr>
</table>
<table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left!important">
  <tr>
    <td>test2</td>
    <td>test2</td>
    <td>test2</td>
  </tr>
  <tr>
    <td>test2</td>
    <td>test2</td>
    <td>test2</td>
  </tr>
</table>
</div>

Answer 1

试试这个，在 div 中使用 div。示例：http: //jsbin.com/opohif/2/edit

希望它可以帮助你。

Answer 2

找出一种替代解决方案，但是否有任何直接选择，请提出建议。

<div style="float:left; max-width:300px; min-width:50px; overflow-x:auto!important; white-space:nowrap;">
<table border="1">
    <tr>
        <td>
            <table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left">
              <tr>
                <td>test1</td>
                <td>test1</td>
                <td>test1</td>
              </tr>
              <tr>
                <td>test1</td>
                <td>test1</td>
                <td>test1</td>
              </tr>
            </table>
        </td>
        <td>
            <table width="200" border="1" cellpadding="0" cellspacing="0" style="float:left!important">
              <tr>
                <td>test2</td>
                <td>test2</td>
                <td>test2</td>
              </tr>
              <tr>
                <td>test2</td>
                <td>test2</td>
                <td>test2</td>
              </tr>
            </table>
        </td>
    </tr>
</table>
</div>