Question

https://datatables.net/examples/api/row_details.html

我已经根据上面的数据表示例创建了嵌套表以获取额外信息。我创建了两个类似于示例中的表。我现在正试图将这些表的高度设置为固定量并启用滚动，以便在存在大量信息时可以滚动小表。

我将此添加到dataTables.css：

table.dataTable table
{
  //all of these work
  width: 47%;
  margin:1%;
  float:left;
  border: solid 1px #dddddd;

  // none of these take affect
  min-height: 50px !important;
  max-height: 50px !important;
  height: 50px !important;
  overflow-y: scroll;
}

浏览器检查器在表格上正确显示所有css，只是忽略高度/滚动由于某种未知原因，我不知道为什么有一半样式工作。

我还能如何设置嵌套表的高度？

Answer 1

<强>解

您可以将子行包装在<div class="child-container></div> format() JavaScript函数中并应用以下CSS规则：

table.dataTable .child-container {
  max-height: 150px;
  overflow-y: auto;
}

table.dataTable .child-container table {
  width: 47%;
  margin:10px 10px 10px 40px;
  float:left;
  border:1px solid #DDD;
}

<强>样本

请参阅this jsFiddle以获取代码和演示。

datatables - 嵌套表格高度样式

1 个答案: