javascript - 如果弹出 div 的位置设置为相对，则表行大小增加

Question

我已经使用 css 在表数据的悬停 上显示了动态生成的弹出窗口。

当弹出的 position 为 fixed 或 absolute 时，它工作正常，但如果 position 设置为 relative 然后表格数据高度增加。

下面是使用的 HTML 和 CSS:

CSS

.dropv, .dropv ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropv a {
  display:inline;
  width: 185px;
}

.dropv li {
  float: left;
  padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
  position: fixed;
  background-color: lightyellow;
  padding: 0px 0px 0px 4px;
  width: 185px;
  left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
  left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
  color: blue;
  text-decoration: none;
  display: block;
}

.dropv li ul li a:hover {
  position: relative;
  text-decoration: underline;
}

HTML

<td id="' + frameoperationtooltip.concat(framecol) + '" style="display:table-row;">
      <div class="dataheight">
        <ul class="dropv">
          <li>' + operation + '<ul><li>Message Recieved(Bytes):' + writtenBytes + '</li>
            <li>No. Of Streams:' + readBytes + '</li>
            <li>Message Sent(Bytes):' + nbStreams + '</li>
            <li>Size of Streams(Bytes):' + sizeOfStreams + '</li>
            <li>Elapsed Time(ms):' + elapsedTime + '</li>
            <li><a href="javascript:OpenFileInPopup(&quot;' + request + '&quot;,&quot;' + preframerow + '&quot;);">Request</a>
            <li><a href="javascript:OpenFileInPopup(&quot;' + response + '&quot;,&quot;' + preframerow + '&quot;);">Response</a>
            <li><a href="javascript:OpenFileInPopup(&quot;' + callStack + '&quot;,&quot;' + preframerow + '&quot;);">CallStack</a>
            </li></ul></li>
        </ul>
      </div>
    </td>  

fixed position 的问题是我的表有很多行，对于需要向下滚动的行，弹出窗口超出页面，对于 relative 它会增加行高。

Answer 1

试试这个

table {
 table-layout: fixed;
}