responsive table with chosen: chosen-drop got cut off behind table

Question

我正在使用来自此 site 的响应式 table 和选择的 select 多个。

这里是稍微修改过的rwd-table css文件。但没什么，我只是改变了布局颜色。

@charset "utf-8";
/* CSS Document for Responsive Table*/
.rwd-table {
  margin: 1em 0;
  min-width: 300px;
  width:auto;
  border: 1px solid #ddd;
}
.rwd-table tr {
  border: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 650px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 650px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

.rwd-table {
  color: #545454;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #dddddd;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 650px) {
  .rwd-table th, .rwd-table td {
    padding: 0.5em 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {

}

唯一不起作用的是 table 后面的 chosen-drop 截断。我一直在尝试更改 z-index 但没有用。

我把代码放在 jsfiddle here

如果有人能帮助我，将不胜感激。谢谢。

Answer 1

您已拆分 CSS 相同的选择如下：

.rwd-table {
  margin: 1em 0;
  min-width: 300px;
  width:auto;
  border: 1px solid #ddd;
}
.rwd-table tr {
  border: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}

和

.rwd-table {
  color: #545454;
  border-radius: .4em;
  overflow: hidden; // <<<<<<<<<< overflow causing the problem
}
.rwd-table tr {
  border-color: #dddddd;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}

在第二段代码中，您将 table 溢出设置为隐藏，这就是您选择的内容被隐藏的原因..

最好将相同选择器的 CSS 组合在一个地方，以防止出现歧义。

这是一个有效的fiddle

responsive table with chosen: chosen-drop got cut off behind table

responsive table with chosen: chosen-drop got cut off behind table

html

css

jquery-chosen