表格单元格中的下拉菜单在每次单击时切换表格行高度

Question

我在表格单元格中有一个下拉列表。点击后，下拉菜单将展开以显示菜单项。但是，只要菜单展开/折叠，表行高度也会改变。

如何保持表格行高度不变，并在表格上显示下拉列表。我尝试为下拉容器设置更高的z-index，但它没有用。如，

.menu-body{
    background-color: #ea7600;
    z-index:2;
}

Plunker代码为here。

表高度不得低于第二条暗水平线。

Answer 1

您需要使用绝对定位，但这也需要一些小的html更改：

将th添加到th和td：

<th><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng header</span></th>

<td><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng content</span></td>

更改css：

 td,th{
   position: relative;
   border: solid black 2px;
   padding: 5px;
   text-align: center;
 }

  td span,th span{
      text-overflow: ellipsis;
   overflow : hidden;
   white-space: nowrap;
   display: block;
  }

.menu-body{
     position: absolute;
     width: 100%;
 }

更新plunker：http://plnkr.co/edit/WYyrnO5lIVFFJBCNdfNc?p=preview

Answer 2

.parent-container-classname *{
 overflow : visible;
}

.menu-body{
 overflow : auto !important;
}

所有父容器应具有overflow:visible，下拉菜单应具有overflow:auto