我想有一个表，其中一些行包括另一个表。我的html文件如下：
HTML：答案后更新
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two tables:</h2>
<table>
<tr>
<th>Name:</th>
<td>Rows including tables</td>
</tr>
<tr>
<th rowspan="4">Telephone:</th>
<td>row1 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>row3 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr class="red">
<td>
<div class='redTable'>
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS：
#mouse { cursor: pointer; }
.fieldsetContainer { height: 0;overflow: hidden;transition: height 400ms linear; }
#toggle { display: none; }
#toggle:checked~.fieldsetContainer { height: auto; }
label .arrow-dn { display: inline-block; }
label .arrow-up { display: none; }
#toggle:checked~label .arrow-dn { display: none; }
#toggle:checked~label .arrow-up { display: inline-block; }
但问题是第二次崩溃不起作用，它使第二排第二排而不是第二排崩溃。
我在互联网上搜索了这个问题，但我失败了。我怎么能处理这个问题？
顺便说一下，我在jsfiddle中添加了完整的代码here。
更新：
非常感谢你的答案。正如你所提到的，我应该改变id的for和<label>属性，它们应该是唯一的。但问题不在于我有数千个这样的表，然后我不能手动完成。我想知道你是否可以通过CSS或JS系统地告诉我。我将它们添加到XSLT文件中。我再次感谢您的评论！
这里是xslt文件中的一些与主要点相关的行。
<tr class="yellow">
<td>
<div id="yellowTable">
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
<tr class="red">
<td>
<div id="redTable">
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
（由于保存了很长的问题，我删除了结束标记。）
UPDATE2：
我正在附加JavaScript代码，用于分配id和属性for，如上所述。
JS：
function assignIdAndForAttribute()
{
var redTable= document.getElementById("redTable");
var redInputTag = redTable.getElementsByTagName("input");
var redLabelTag = redTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableError.length; i++) {
redInputTag [i].setAttribute("id", 'toggleRed' + i);
redLabelTag [i].setAttribute("for", 'toggleRed' + i);
}
//]]>
var yellowTable = document.getElementById("detailedTable");
var yellowInputTag = yellowTable.getElementsByTagName("input");
var yellowLabelTag = yellowTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableWarning.length; i++) {
yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
}
//]]>
}
该错误源于您使用的id应该是唯一的。如果您将切换更改为类而不是ID，并将您的css从#toggle更新为.toggle，您几乎可以拥有它。
如果你没有隐藏那个点上的input.toggle元素，你会发现它工作正常。
标签的for属性也需要更新，以便您在输入时可以与标签进行交互。只需在每个切换上使用唯一ID即可放置在标签的for属性中，并使用类来设置样式和功能。
要达到预期效果，请使用以下选项
HTML：
<input type="checkbox" class="toggle" />
CSS：
.toggle {
opacity:0
}
.toggle:checked~.fieldsetContainer {
height: auto;
}
.toggle:checked~label .arrow-dn {
display: none;
}
.toggle:checked~label .arrow-up {
display: inline-block;
}