Discover the code snippet here, without pasting the entire content...
As an illustration, let's utilize this example:
<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 styles applied:
.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;
/* Change font to Lato for comparison */
}
Is there a method to make these rows collapsible, including displaying the Row name (<p> tag) while collapsing all the <td> sections only using HTML/CSS? Or will JavaScript need to be added?