我想让此表中的行可折叠/可扩展
Posted
技术标签:
【中文标题】我想让此表中的行可折叠/可扩展【英文标题】：I want to make the rows in this table collapsible/expandable 【发布时间】：2017-09-25 03:47:58 【问题描述】：在这里找到代码，不想粘贴整个东西...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？
【问题讨论】：
也许这对你有帮助。 ***.com/questions/16926752/… @BhavyaSinha - 确保您进行所有必要的编辑，而不仅仅是一些。 【参考方案1】：您可以使用input:checked 实现此目的，类似于此Collapse and expand elements with CSS
您必须将所有 input 标签放在您的桌子之前，然后放置 label 标签，例如在每行的每个第一个单元格内。你需要input 和label 标签上的id/for 属性。
【讨论】：
以上是关于我想让此表中的行可折叠/可扩展的主要内容，如果未能解决你的问题，请参考以下文章