Question

在此处查找代码，不要粘贴整个代码...... https://code.sololearn.com/W8odKz78WT07/#html

或者作为一个例子，让我们使用这个

<head>

</head>

<body>
    <table>
        <tr>
            <th></th>
            <th><img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/></th>
            <th><img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/></th>
            <th><img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/></th>
            <th><img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/> </th>
            <th><img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/></th>
        </tr>

        <tr>
            <th> <p class="comparisons">Operating Systems</p>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
            </th>

        </tr>
            <th><p class="comparisons">Mobile compatibility</p>
                <td><img style="padding-left:20px" title="iOS and Android" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"></td>
                <td><img style="padding-left:30px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td>
                <td><img style="padding-left:30px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td>
                <td><img style="padding-left:20px" title="iOS and Android"  src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"></td>
                <td><img style="padding-left:60px" title="iOS, Android and Windows"  src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td>
            </th>
        </tr>

正在应用的CSS：

.isaaccrm {
    float: left;
    height: 20px;
    width: 100px;
}

.zoho {
    height: 50px;
    width: 115px;
    padding-top: 10px;
    float: right;
    margin-right: 30px;

}

.salesforce {
    height: 60px;
    width: 90px;
    padding-top: 10px;
    padding-left: 20px;
}

.infusionsoft {
    height: 25px;
    width: 180px;
    padding-top: 5px;
}

.sugarcrm {
    height: 60px;
    width: 90px;
    padding-top: 10px;
    margin-right: 55px;
    float: right;
}

.comparisons {

    margin-top: 30px;
    margin-bottom: 30px;
    /* Make the comparison font into Lato*/

}

有没有什么方法可以让这些行可折叠，同时显示行的名称（<p>标记，所以简单地折叠所有<td>），同时仅使用HTML / CSS ？或者我必须包含JavaScript吗？

Answer 1

您可以使用input:checked来实现此目的，类似于此Collapse and expand elements with CSS

您必须将所有input标记放在表格之前，然后放置label个标记，例如每行中每个第一个单元格的内部。您需要id/for和input代码上的label个属性。

我想让此表中的行可折叠/展开

1 个答案: