在大型表格中添加展开/折叠按钮
在大型表格中添加展开/折叠按钮
提问于 2021-11-09 01:47:19
我有这样的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
th {
border: 1px solid black;
border-bottom: 3px solid black;
text-align: center;
color: #121111;
background-color: #59ebbd;
position: sticky;
top: 0;
}
td {
border: 1px solid grey;
padding: 2px;
}
table {
border-collapse: collapse;
table-layout: fixed;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<table border="0" class="df data">
<thead>
<tr>
<th>Date</th>
<th>count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>3 </td>
</tr>
<tr>
<td>6</td>
<td>3</td>
</tr>
<tr>
<td>60</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>寻找最简单的解决方案，以避免滚动html中的大型表格-我想显示表(折叠)的前第n行，并有权访问它的其余部分(展开)。
因此可以在第5行之后显示展开/折叠按钮，如下所示：
我在网络上寻找如何做到这一点的提示，但我只找到了一个解决方案来折叠/展开表格中的每一行-这不是我要找的。当表超过第n行时，我寻找一次折叠/展开整个表的解决方案。
我做过类似的事情：http://jsfiddle.net/nfLhzxb7/
但仍然不知道如何让5-7行消失。
回答 1
Stack Overflow用户
发布于 2021-11-09 02:10:21
像这样吗？https://bbbootstrap.com/snippets/bootstrap-collapsible-expandable-row-table-26382307请添加更多的代码。这通常是在JavaScript中完成的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69895967
复制相关文章
相似问题
腾讯云开发者
