本教程详细讲解如何使用纯css 实现表格行的内容切换功能，特别关注在复杂表格布局中利用复选框和相邻兄弟选择器 (`~`) 的技巧与限制。我们将探讨在表格单元格内部放置复选框时可能遇到的挑战，并提供一种既能保持功能又能兼顾用户体验和可访问性的解决方案。
1. CSS相邻兄弟选择器（~）的工作原理
在深入表格布局之前，理解CSS相邻兄弟选择器（~）是实现纯CSS内容切换的基础。该选择器允许我们选择一个元素之后的所有同级兄弟元素。其语法为 selector1 ~ selector2，表示选择 selector1 之后的所有 selector2 兄弟元素。
例如，要实现点击复选框后显示其后的某个内容块，我们可以使用如下CSS：
input[type="checkbox"]:checked ~ .content {
/* 当复选框被选中时，其后的.content元素样式 */
max-height: 100vh; /* 展开内容 */
padding: 1em;
}
.content {
overflow: hidden;
max-height: 0; /* 默认隐藏内容 */
padding: 0 1em;
transition: all 0.35s ease-in-out; /* 平滑过渡效果 */
} 关键在于，input[type="checkbox"] 和 .content 必须是同一个父元素下的兄弟节点。如果它们之间存在其他非兄弟关系（例如，被不同的父元素包裹），则 ~ 选择器将无法生效。
2. 表格布局中实现内容切换的挑战
表格（
）的结构特性（、
、、）对CSS选择器提出了特定的挑战。用户通常希望在点击表格的某一行（或行内某个元素）时，展开该行下方或关联的详细内容。立即学习 “前端免费学习笔记（深入） ”；
考虑以下常见的表格结构，其中表格内容被隐藏在紧随主行之后的另一行中：
<!-- 主行 -->
<tr>
<td>
<label class="tab-label" for="row1">点击我</label>
<!-- 用户期望将复选框放置在此处 -->
</td>
<td>N/A</td>
<!-- ...其他单元格... -->
</tr>
<!-- 详细内容行 -->
<tr>
<td colspan="11">
<input id="row1" type="checkbox" />
<div class="tab-content">
<!-- 隐藏的详细内容表格 -->
</div>
</td>
</tr> 在这种结构中，input#row1 和
是兄弟元素，它们都位于第二个
内部的一个 中。因此，input:checked ~ .tab-content 选择器能够正常工作，通过点击关联的 来控制 tab-content 的显示与隐藏。然而，如果尝试将复选框直接移动到第一个
的 内部，例如：<!-- 主行 -->
<tr>
<td>
<input id="row1" type="checkbox" />
<label class="tab-label" for="row1">点击我</label>
</td>
<td>N/A</td>
<!-- ...其他单元格... -->
</tr>
<!-- 详细内容行 -->
<tr>
<td colspan="11">
<!-- 此时 input#row1 不在此处 -->
<div class="tab-content">
<!-- 隐藏的详细内容表格 -->
</div>
</td>
</tr> 在这种情况下，input#row1 位于第一个
的 内部，而 位于第二个
的 内部。它们不再是兄弟元素，input:checked ~ .tab-content 选择器将无法跨越
边界进行选择，导致内容切换功能失效。结论： 要想纯粹使用CSS的相邻兄弟选择器实现内容切换，复选框（input）和被切换的内容元素（例如 .tab-content）必须是DOM结构中的兄弟节点。在表格中，这意味着它们通常需要位于同一个
或
内部，或者作为同一
的直接子元素（尽管这在语义上不常见）。3. 实现表格行内容切换的有效结构与优化
鉴于CSS选择器的限制，最有效的纯CSS表格内容切换方案是保持复选框与被切换内容之间的兄弟关系，同时通过一些技巧来优化用户体验和可访问性。
3.1 基础结构（保持兄弟关系）
以下是原始代码中已有的、能够正常工作的结构模式，它确保了 input 和 div.tab-content 的兄弟关系：
<!-- 主行，包含一个可见的标签作为触发器 -->
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
<label class="tab-label" for="row1">展开这里</label>
</td>
<!-- ...其他表格数据单元格... -->
</tr>
<!-- 详细内容行，包含隐藏的复选框和要切换的内容 -->
<tr>
<td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
<input id="row1" type="checkbox" />
<div class="tab-content">
<!-- 嵌套表格或其他详细内容 -->
<table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
<!-- ...详细内容表的表头和数据... -->
</table>
</div>
</td>
</tr> 对应的CSS：
.tab-label {
font-weight: bold;
/* 其他样式 */
}
.tab-content {
overflow: hidden;
max-height: 0; /* 默认隐藏 */
padding: 0 1em;
color: #2c3e50;
background: white;
transition: all 0.35s ease-in-out; /* 平滑过渡 */
}
/* 当ID为row1的复选框被选中时，其后的.tab-content显示 */
input:checked ~ .tab-content {
max-height: 100vh; /* 展开内容，使用足够大的值 */
padding: 1em;
} 在这个结构中， 位于主行，它通过 for="row1" 属性与隐藏在下一行 中的 时，会切换关联的复选框状态，进而通过 input:checked ~ .tab-content 规则控制 .tab-content 的显示。3.2 优化用户体验与可访问性
为了提供更优雅的用户界面和更好的可访问性，我们可以对上述工作结构进行优化：
隐藏实际的复选框： 视觉上移除复选框，只保留标签作为交互元素。
使标签可聚焦： 为 label 添加 tabindex="0"，使其可以通过键盘 Tab 键聚焦，并支持回车键激活，从而提升无障碍性。
添加聚焦样式： 为聚焦状态的 label 添加样式，提供视觉反馈。
更新后的HTML结构：
<div id="page-wrap" style="margin: 50px;background: cornflowerblue;">
<h1 style="margin: 0;line-height: 3;text-align: center;font: 30px/1.4 Georgia, Serif;">Table</h1>
<table role="presentation" style="width: 100%;border-collapse: collapse;">
<thead>
<!-- 表头部分保持不变 -->
<tr>
<th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
</thead>
<tbody>
<!-- 第1个可折叠行 -->
<tr>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">
<label class="tab-label" for="row1" tabindex="0"> 展开这里</label>
</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
<td style="padding: 6px;border: 1px solid #ccc;text-align: center;">N/A</td>
</tr>
<tr>
<td colspan="11" style="border: solid 1px white;text-align: center;padding: 0;">
<input id="row1" type="checkbox" />
<div class="tab-content">
<table role="presentation" style="border-collapse: collapse;margin: 10px auto;background-color: aqua;">
<thead>
<tr>
<th rowspan="2" colspan="1" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="4" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
<th rowspan="1" colspan="2" style="background: #333;color: white;font-weight: bold;padding: 6px;border: 1px solid #ccc;text-align: center;">
Header</th>
</tr>
<tr>
<th rowspan="2" style="background: #333;color: white;font-weight: bold;padding:
