折叠表格表格
<div class="codebox" data-prev="1"><style>
<txt-green>/** 表格HTML结构：</txt-green>
<txt-green>table 表格，tr 行，td 列，th 表头</txt-green>
<txt-green>table 父元素，tr 第一级子元素，td、th 第二级子元素</txt-green>
<txt-green>以下选择器在独立页面使用，若页面中存在其它表格会受影响</txt-green>
<txt-green>*/</txt-green>
table {
margin: 20px 0 20px 25%;
width: 50%;
border-collapse: collapse; /* 表框折叠 */
}
th {
background: #f2f2f2;
font-size: bold;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
tr:not(:first-child) {
visibility: collapse; /* 非首行隐藏 */
}
td:first-child {
text-align: center; /* 首列文本居中 */
}
table:hover tr {
visibility: visible; /* 指针移入显示 */
}
h1 {
text-align: center;
}
</style>
<h1>鼠标指针移至表头展开表格</h1>
<table id="dataTable">
<tr>
<th width="50">序号</th>
<th>内 容</th>
<th width="150">备注</th>
</tr>
</table>
<script>
var total = 10, znums = '一二三四五六七八九十'.split('');
var frg = document.createDocumentFragment();
Array.from({length: total}).forEach((tr, idx) =>{
tr = document.createElement('tr');
tr.innerHTML = `<td>${idx+1}</td><td>内容${znums}</td><td></td>`;
frg.appendChild(tr);
});
dataTable.appendChild(frg);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js?v0';
linenumber();
</script> html代码中，只建立了表格的表头（th），其余行（tr）列（td）在JS中创建，这样更高效。
如果需要在表格中展现真实数据，可以使用JS对象或数组存储数据，然后遍历对象或数组获取数据并呈现在表格中。 visibility 属性在表格中使用 collapse 等同于 hidden，前者意为折叠，后者隐藏，达成的目的都一样。
代码中的 table 选择器，border-collapse 属性也存在 collapse 一词，这是边框折叠属性，用于控制表格边框样式，包括 table 的边框和 td、th 的边框，取值为 collapse 表示表格、单元格等的边框全部折叠在一起，即各个单元格之间共享边框，这样可以规避双线边框现象的发生；取值 separate 表示边框彼此分离，默认表框样式，各单元格会拥有自己的边框，表格边框整体呈现双边框现象。 折叠后的单元格在排版层面不占位，可以再 </table> 之后加一行文本加以验证，例如：
<p style="text-align: center; font-size: 24px;">观察文本</p>， table表格是HTML一个古老的标签，时至今日仍在Web页中被广泛使用，Discuz! 论坛程序就大量使用 table 来实现页面布局，感兴趣的朋友可以查看网页代码验证。 这种折叠表格挺漂亮，如何分别填入相关不同内容呢？谢谢马老师精彩分享~ 杨帆 发表于 2025-11-5 14:04
这种折叠表格挺漂亮，如何分别填入相关不同内容呢？谢谢马老师精彩分享~
如果使用JS填入数据，示例已经给了示范。
如果仅通过HTML填写表格数据，请讲JS代码删掉，然后在 </table> 之前插入：
<tr>
<td>1</td>
<td>内容一</td>
<td>备注</td>
</tr>
以上是完整的一个表格行，注意 td 到底是多个组前后要一致，即和表头的设置相一致。 马黑黑 发表于 2025-11-5 18:18
如果使用JS填入数据，示例已经给了示范。
如果仅通过HTML填写表格数据，请讲JS代码删掉，然后在之前 ...
谢谢马老师~通过HTML填写表格数据懂了，还不清楚如何使用JS填入不同数据呀{:4_203:} 这岂不是节约页面了。{:4_203:} 樵歌 发表于 2025-11-5 18:50
这岂不是节约页面了。
大概如此 杨帆 发表于 2025-11-5 18:38
谢谢马老师~通过HTML填写表格数据懂了，还不清楚如何使用JS填入不同数据呀
示例的代码是一种形式，说明里也谈到JS用对象和数组存储数据，这是基本功，如果这个还不会，得去补补课 马黑黑 发表于 2025-11-5 19:20
示例的代码是一种形式，说明里也谈到JS用对象和数组存储数据，这是基本功，如果这个还不会，得去补补课
是的，基本功欠缺，亟需好好补课。谢谢老师{:4_180:} 杨帆 发表于 2025-11-5 19:54
是的，基本功欠缺，亟需好好补课。谢谢老师
我们的音画帖，同步歌词、多曲发布，都用到数组，而且是二维数组。补一补JS的数组知识，对做音画帖很有帮助。JS对象也是最常用的数据组织形式，弄不懂它，使用JS将受到极大的限制。 马黑黑 发表于 2025-11-5 20:13
我们的音画帖，同步歌词、多曲发布，都用到数组，而且是二维数组。补一补JS的数组知识，对做音画帖很有帮 ...
知道了，先补一补JS的数组知识，谢谢老师{:4_180:} 杨帆 发表于 2025-11-5 20:45
知道了，先补一补JS的数组知识，谢谢老师
数组和JS对象都可以存储数据，并且可以调用 马黑黑 发表于 2025-11-5 12:22
折叠后的单元格在排版层面不占位，可以再之后加一行文本加以验证，例如：
观察文本，
去试过了，折叠后果然不占位，这几个字也跟着上去了，展开的时候再被挤压下去。 红影 发表于 2025-11-5 22:27
去试过了，折叠后果然不占位，这几个字也跟着上去了，展开的时候再被挤压下去。
这和其它CSS相关隐藏的其它效果一致 马黑黑 发表于 2025-11-5 21:53
数组和JS对象都可以存储数据，并且可以调用
知道了，谢谢老师{:4_171:} 杨帆 发表于 2025-11-5 23:42
知道了，谢谢老师
{:4_190:}
页:
[1]