Question

<!DOCTYPE html>
<html>
<head>
  </head>
 <body>
   <div id="divScroll" style="width: 100%;overflow-x: scroll;overflow-y: scroll;">

<table width="100%">
<tr>
    <td>Name</td>
    <td>Name</td>
    <td>Name</td>
     <td>Name</td>
     <td>Name</td>
     <td>Name</td>
     <td>Name</td>
     <td>Name</td>
   <td>Name</td>
   <td>Name</td>
   <td>Name</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>    
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
      </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
      <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
      <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr><tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr><tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
      <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
      <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
     <td>abc</td>
      <td>abc</td>
     <td>abc</td>
     <td>abc</td>
  </tr>  
    </table>
</div>

</body>
</html>

以上是我的HTMl代码问题在IE中提供水平和垂直滚动

See JSbin Demo

Answer 1

您需要指定滚动的高度和宽度才能工作

更改您的

<div id="divScroll" style="width: 100%;overflow-x: scroll;overflow-y: scroll;">

到

<div id="divScroll" style="width: 300px;height:200px;overflow-x: scroll;overflow-y: scroll;">

您也可以尝试这种方式

<div id="divScroll" style="width: 300px;height:200px;overflow:auto;">

检查此 DEMO

适用于您的Reference

Answer 2

为垂直滚动条应用一些高度，如：height: 150px; ...与水平滚动的宽度相同..

<div id="divScroll" style="width: 100%;overflow: scroll; height: 150px;">

无需应用两次overflow-x和overflow-y只需使用overflow ..

如何在IE中给出水平和垂直滚动条

2 个答案: