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>

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

2 个答案: