具有固定標題和可擴展行的可滾動表

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;