折叠表格表格

马黑黑 · 发表于 2025-11-5 11:57

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

table 表格，tr 行，td 列，th 表头

table 父元素，tr 第一级子元素，td、th 第二级子元素

以下选择器在独立页面使用，若页面中存在其它表格会受影响

*/ 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[idx]}</td><td></td>`; frg.appendChild(tr); }); dataTable.appendChild(frg); </script>

马黑黑 · 发表于 2025-11-5 12:01

html代码中，只建立了表格的表头（th），其余行（tr）列（td）在JS中创建，这样更高效。

如果需要在表格中展现真实数据，可以使用JS对象或数组存储数据，然后遍历对象或数组获取数据并呈现在表格中。

马黑黑 · 发表于 2025-11-5 12:17

visibility 属性在表格中使用 collapse 等同于 hidden，前者意为折叠，后者隐藏，达成的目的都一样。

代码中的 table 选择器，border-collapse 属性也存在 collapse 一词，这是边框折叠属性，用于控制表格边框样式，包括 table 的边框和 td、th 的边框，取值为 collapse 表示表格、单元格等的边框全部折叠在一起，即各个单元格之间共享边框，这样可以规避双线边框现象的发生；取值 separate 表示边框彼此分离，默认表框样式，各单元格会拥有自己的边框，表格边框整体呈现双边框现象。

马黑黑 · 发表于 2025-11-5 12:22

折叠后的单元格在排版层面不占位，可以再 </table> 之后加一行文本加以验证，例如：

<p style="text-align: center; font-size: 24px;">观察文本</p>，

马黑黑 · 发表于 2025-11-5 12:28

table表格是HTML一个古老的标签，时至今日仍在Web页中被广泛使用，Discuz! 论坛程序就大量使用 table 来实现页面布局，感兴趣的朋友可以查看网页代码验证。

杨帆 · 发表于 2025-11-5 14:04

这种折叠表格挺漂亮，如何分别填入相关不同内容呢？谢谢马老师精彩分享~

马黑黑 · 发表于 2025-11-5 18:18

杨帆发表于 2025-11-5 14:04
这种折叠表格挺漂亮，如何分别填入相关不同内容呢？谢谢马老师精彩分享~

如果使用JS填入数据，示例已经给了示范。

如果仅通过HTML填写表格数据，请讲JS代码删掉，然后在 </table> 之前插入：

<tr>
      <td>1</td>
      <td>内容一</td>
      <td>备注</td>
</tr>

以上是完整的一个表格行，注意 td 到底是多个组前后要一致，即和表头的设置相一致。