HTML 滚动条一半工作一半不工作

Question

这是我的 code

table#projectTable > tbody ,  table#productTable > tbody{
            height: 300px;
            overflow: auto;
}

如果单击上部而不是下部，则滚动条有效。 很奇怪。

我使用了 firefox inspect 元素，我认为它与 TR 元素重叠有关，因为滚动条在第二行(编辑产品信息)的(假想延长线)上方工作正常

Answer 1

正如我在评论中所说的

.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}

将解决您的问题。

也许你已经知道了，但如果你不知道，我建议你在设计布局时给无表设计一个机会。

例如 - 这个样本也可以更好 -

preview

HTML

<div id="container">

    <div id="left">

        <a href="#" onclick="hide('table1')">Edit branchInfo</a>
        <a href="#" onclick="hide('table2')">Edit branchInfo</a>
        <a href="#" onclick="hide('table3')">Edit projectList</a>

    </div>

    <div id="right">
        <div id="table1"> ...1... </div>
        <!--#table1-->
        <div id="table2"> ...2... </div>
        <!--#table2-->
        <div id="table3"> ...3... </div>
        <!--#table3-->
    </div>
    <!--#right-->

    <div class="clear"></div>

</div>
<!--#container-->

CSS

  .clear {
      clear: left;
  }

  #container {
      border: 1px solid #666;
      padding: 5px 5px 0 5px;
  }

  #left, #right {
      float: left;
  }

      #left a {
          display: block;
          width: 100px;
          height: 200px;
          font: 12px/200px arial;
          border: 1px solid #999;
          margin-bottom: 5px;
          padding: 10px;
          text-decoration: none;
          font-weight: bold;
          color: #666;
      }

          #left a:hover {
              background: #efefef;
          }

          #left a:active {
              background: #c0c0c0;
          }

  #right {
      border: 1px solid #999;
      margin-left: 5px;
      padding: 10px;
      height: 654px;
      width: 900px;
  }