Question

我想有一个表，其中一些行包含另一个表。我的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的{{1}}和for属性，它们应该是唯一的。但问题不在于我有数千个这样的表，然后我不能手动完成。我想知道你是否可以通过CSS或JS系统地告诉我。我将它们添加到XSLT文件中。我再次感谢您的评论！

这里是xslt文件中的一些与主要点相关的行。

<label>

（由于保存了很长的问题，我删除了结束标记。）

UPDATE2：

我正在附加JavaScript代码，用于分配<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"> ..............................和id属性，如上所述。

JS ：

for

使用CSS多次崩溃

0 个答案: