如何使html表列(<th>)可折叠/可扩展？
如何使html表列(<th>)可折叠/可扩展？
提问于 2022-07-26 14:50:07
我到处寻找答案，却什么也找不到。我有一个包含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>会使展开列再次折叠。理想情况下，当列展开/折叠时，我想进行一个很好的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一样。因此，它看起来像一个包含9列的普通表，直到单击第7列标题，这将将8-11列转换为从右侧打开/展开为13列表。然后，当再次单击时，第8-11列应将左“折叠”转换为第7列的右侧。这些列应该按照给定的顺序排列。
如果可能的话，我想用纯HTML、Javascript、jQuery和CSS来实现这一点。这张桌子是DataTable。
谢谢你的帮助！
回答 1
Stack Overflow用户
发布于 2022-07-26 19:30:28
下面是一个使用字体大小作为可动画属性的简单示例。它需要一行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查找每个列的实际宽度，并相应地展开和收缩它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73125555
复制相关文章
相似问题
腾讯云开发者
