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;}

将解决您的问题。

maby你已经知道但是如果你不建议你在设计布局时给你一个无表格设计的机会。

例如

- 这个样本也可能更好 -

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;
  }