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

Question

是否可以有一个带有固定标题的可滚动HTML表，例如：

http://jsfiddle.net/T9Bhm/7/

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

http://jsfiddle.net/Pn3m5/

我已经可以分别复制每个效果，但不能在同一张表中同时复制两个效果。

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

<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

在这里工作JS小提琴

必须制作一个自定义脚本并更改html一点。 为了使粘性标题正常工作，我使用了一种有两个表的技术。 第一个表呈现thead ，第二个表呈现tbody 。

对于可扩展行，您现在将创建一个具有expandable-row类的tr和一个同级tr （可扩展行之后的下一个元素），其同级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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Click on a row for more info: <table class="table-header"> <thead> <tr> <th></th> <th>Name</th> <th>Age</th> </tr> </thead> </table> <table class="table-body"> <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> <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><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><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><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><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><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><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> </table> 

Answer 2

我过去通过使用一系列div作为位于可滚动表上方的表列标题来完成此操作。 使用JavaScript，我使用事件处理程序更改了顶部（标题）div的宽度，以匹配其下表中td的宽度。

诀窍是将div的样式设置为display: inline-grid;