如何使 html 表格列 (<th>) 可折叠/可展开？答案

【问题标题】：How to make html table columns (<th>) collapsible/expandable?如何使 html 表格列 (<th>) 可折叠/可展开？
【发布时间】：2022-07-27 03:30:28
【问题描述】：

我到处寻找答案，但找不到任何东西。我有一个包含 13 列的 HTML 表格。我的第 7 栏上衣数量是第 8-11 列的总数：# 短袖, # 长袖, # 毛衣, # 夹克.表格中的每一行代表一个人拥有的衣服。我的目标是默认折叠第 8-11 列，仅显示第 1-7 列和第 12 列和第 13 列。当我单击第 7 列的标题<th>Number of Tops</th> 时，我希望第 8-11 列展开以显示有关该数字如何分解的更多信息。此外，当列展开时，单击第 7 列的标题<th>Number of Tops</th> 应该会使展开的列 8-11 再次折叠。理想情况下，我希望在列展开/折叠时进行漂亮的 CSS 过渡，但这只是顶部的樱桃。

这是我正在谈论的表格的 HTML：

<div class=\"table\">
  <table>
    <thead>
      <tr>
        <th>Name</th>             <!-- Always visible -->
        <th>Address</th>          <!-- Always visible -->
        <th>Phone Number</th>     <!-- Always visible -->
        <th>Number of Pants</th>  <!-- Always visible -->
        <th>Number of Shoes</th>  <!-- Always visible -->
        <th>Number of Socks</th>  <!-- Always visible -->
        <!-- Column 7: totals column -->
        <th>Number of Tops</th>   <!-- Always visible; clickable -->
        <th># Short-sleeve</th>   <!-- collapsible/expandable -->
        <th># Long-sleeve</th>    <!-- collapsible/expandable -->
        <th># Sweaters</th>       <!-- collapsible/expandable -->
        <th># Jackets</th>        <!-- collapsible/expandable -->
        <th>Number of Hats</th>   <!-- Always visible -->
        <th>Number of Bags</th>   <!-- Always visible -->
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

当列折叠时，我希望列 8-11 的相应单元格值也像 CSS display: none 一样折叠。因此，在单击第 7 列标题之前，它看起来像一个有 9 列的普通表格，这会将第 8-11 列转换为从右侧打开/扩展为 13 列的表格。然后再次单击时，第 8-11 列应将折叠左“转换为”第 7 列的右侧。列的顺序应与给出的顺序相同。

如果可能的话，我想用纯 HTML、Javascript、jQuery 和 CSS 来做这件事。该表是一个数据表。

谢谢您的帮助！

您是否看过这里以帮助您入门：Hide/Show Column in a HTML Table。 these 也可能会有所帮助。
您的更新提到\"该表是一个数据表\"。所以您可以探索all these official column visibility examples。
cols 8-11 的内容只是文本还是有图像或其他内容？
@andrewJames 谢谢，该链接非常有用。当我运行我的项目时，我收到了这个错误：“无法扩展未知按钮类型：clovisGroup”，我认为这是因为没有正确的 DataTables/extensions 版本。我尝试按照 Datatables 下载页面上的说明使用 NPM 下载正确的版本，但我仍然遇到相同的错误。有关如何解决此问题的任何见解？
很难根据对问题的描述（塞进评论）来提供帮助。什么会更好：你能edit你的问题并添加一个更新，显示你已经尝试过什么以及出了什么问题（更详细）。但是...请尝试以minimal reproducible example 的形式提供代码和数据，并强调\"最小的\" - 只需要最少的代码和数据就可以让我们容易地重现你的问题。您甚至可以在创建 MRE 的过程中自己解决它。

标签： javascript html css html-table datatables

【解决方案1】：

这是一个使用 font-size 作为动画属性的简单示例。它需要一行 JavaScript 来在表格本身上设置一个类，以便第 8-11 列中的其他单元格也可以进行扩展或收缩。

table tr> :nth-child(8),
table tr> :nth-child(9),
table tr> :nth-child(10),
table tr> :nth-child(11) {
  font-size: 0px;
  transition: font-size 1s linear;
}

table.expand tr> :nth-child(8),
table.expand tr> :nth-child(9),
table.expand tr> :nth-child(10),
table.expand tr> :nth-child(11) {
  font-size: 16px;
}

<div class="table">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <!-- Always visible -->
        <th>Address</th>
        <!-- Always visible -->
        <th>Phone Number</th>
        <!-- Always visible -->
        <th>Number of Pants</th>
        <!-- Always visible -->
        <th>Number of Shoes</th>
        <!-- Always visible -->
        <th>Number of Socks</th>
        <!-- Always visible -->
        <!-- Column 7: totals column -->
        <th onclick="document.querySelector('table').classList.toggle('expand');">Number of Tops</th>
        <!-- Always visible; clickable -->
        <th># Short-sleeve</th>
        <!-- collapsible/expandable -->
        <th># Long-sleeve</th>
        <!-- collapsible/expandable -->
        <th># Sweaters</th>
        <!-- collapsible/expandable -->
        <th># Jackets</th>
        <!-- collapsible/expandable -->
        <th>Number of Hats</th>
        <!-- Always visible -->
        <th>Number of Bags</th>
        <!-- Always visible -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fred</td>
        <!-- Always visible -->
        <td>Seattle</td>
        <!-- Always visible -->
        <td>07777777777</td>
        <!-- Always visible -->
        <td>4</td>
        <!-- Always visible -->
        <td>3</td>
        <!-- Always visible -->
        <td>24</td>
        <!-- Always visible -->
        <!-- Column 7: totals column -->
        <td>18</td>
        <!-- Always visible; -->
        <td>5</td>
        <!-- collapsible/expandable -->
        <td>6</td>
        <!-- collapsible/expandable -->
        <td>4</td>
        <!-- collapsible/expandable -->
        <td>3</th>
          <!-- collapsible/expandable -->
          <th>2</th>
          <!-- Always visible -->
          <th>4</th>
          <!-- Always visible -->
      </tr>
      <tbody>
  </table>
</div>

但是，您可能想要更复杂一点，并使用 JS 来查找每列的实际宽度并相应地扩展和收缩它们。

【讨论】：