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

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

但行也可以像这样展开onclick：

我已经能够分别复制每种效果，但不能在同一张表中同时复制这两种效果

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

<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中可能吗

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

对于可展开行，您现在将创建一个tr，其中包含类expandable row，以及一个同级tr，该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>

桌子{ 边框：1px纯色灰色； } .表格标题、.表格正文t正文{ 显示：表格； 表布局：固定； 宽度：100%； } .表格标题tr， .桌身tr{ 高度：30px； 边框底部：1px纯色灰色； } .桌身{ 高度：150像素； 溢出：自动； 显示：块； } t正文.可扩展行：n个奇数{ 背景：f9f9f9； } 单击一行了解更多信息： 名称 年龄 + 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

+ 弗莱德 30 诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类

---

在过去，我通过使用一系列div作为位于可滚动表上方的表列标题来实现这一点。使用javascript，我使用事件处理程序更改了顶部标题div的宽度，以匹配下表中td的宽度

---

诀窍是将div的样式设置为显示：inline grid

我会使用bootstrap，但这只是我的观点。你想把这两种东西合并起来，是不是有点不妥？