Question

是否可以使用带有固定标题的可滚动HTML表格，如：

但是这些行也可以像这样扩展：

我能够在同一个表格中单独复制每个，但不能同时复制这两种效果。

我尝试使用以下样式方法：

<style>
    * {box-sizing: border-box} 
    table {
        width: 100%;
    }
    table, td {
        border-collapse: collapse;
        border: 1px solid #000;
    }
    thead {
        display: table; 
        width: 100%
    }
    tbody {
        display: block; 
        max-height: 950px; 
        overflow-y: scroll;
    }
    td, th {
        text-align: center;
        border-bottom: none;
        border-left: none;
    }
</style>

在可扩展行表上，但它不会产生所需的结果。这是可能的（在CSS还是JavaScript中）？

Answer 1

Working JS Fiddle Here

必须制作自定义脚本并稍微更改html。为了使粘性标头工作，我使用的技术是你有两个表。第一个表呈现thead，第二个表呈现tbody。

对于可展开的行，您现在将创建一个tr，其中包含类expandable-row和一个兄弟tr（可扩展行之后的下一个元素），其类为{{1}存储您的可扩展内容：

content

我尝试保留用于显示/隐藏内容的流畅动画，但效果不佳。取消注释<tr class="expandable-row"> <td> + </td> <td>Fred</td> <td>30</td> </tr> <tr class="content"> <td colspan="3"> <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p> </td> </tr>行以将其重新添加。

slideToggle

$(function() {
  $(".content").hide();

  $('.expandable-row').click(function(e) {
    $(this).next('.content').toggle();
    //$(this).next('.content').slideToggle();
  });

});

table {
  border: 1px solid gray;
}

.table-header, .table-body tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-header tr,
.table-body tr {
  height: 30px;
  border-bottom: 1px solid gray;
}

.table-body {
  height: 150px;
  overflow: auto;
  display: block;
}

tbody .expandable-row:nth-child(odd) {
  background: #f9f9f9;
}

具有固定标题和可扩展行的可滚动表

1 个答案: