Question

我有一个div标签，其内容超出了页面宽度。我为div标签设置了水平滚动条。滚动条显示在div的底部，但我希望浏览器的标准滚动条滚动我div的内容。

CSS：

.res_tbl {
    width: 100%;
    overflow-x: scroll;
}

HTML：

  <div class="res_tbl" style="margin-top:40px;">
  <table class="tbl1" cellpadding="5" cellspacing="0" border="0">
    <!-- Table Heading Start -->
    <tbody>
      <tr>
        <th>
          <div style="width:200px;" class="fix_height">
            <div class="sort_h th_1line">efafsdf</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:200px;" class="fix_height">
            <div class="th_1line">sdfsfdsd</div>
          </div>
        </th>
        <th>
          <div style="width:100px;" class="fix_height">
            <div class="sort_h th_1line">sfdsdfsfs</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:110px;" class="fix_height">
            <div style="width:70px" class="sort_h">sfasfsdfs</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:140px;" class="fix_height">
            <div style="width:85px" class="sort_h">sdfsafsfds</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:140px;" class="fix_height">
            <div style="width:75px;" class="sort_h">asfsfsfsdfs</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:140px;" class="fix_height">
            <div class="sort_h th_1line">sfsfsdfdsf</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:140px;" class="fix_height">
            <div class="sort_h th_1line">sfsdffsdfsd</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:100px;" class="fix_height">
            <div style="width:60px;" class="sort_h">safffsdfsafs</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
        <th>
          <div style="width:100px;" class="fix_height">
            <div class="sort_h th_1line">sfdsdfsfsf</div>
            <div class="sort">
            <a class="sort_up" href="#"></a> 
            <a class="sort_dn" href="#"></a></div>
            <div class="eor"></div>
          </div>
        </th>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

这是一个自动浏览器功能，您已经提到过了。您创建了您不想要的代码。只需从代码中删除overflow-x:scroll;即可。

JSFiddle Demo

标准水平滚动条，用于特定div标签

1 个答案: