title: I want to make the rows in this table collapsible/expandable
body: <p>Find the code here, don't want to paste the entire thing... <a href="https://code.sololearn.com/W8odKz78WT07/#html" rel="nofollow noreferrer">https://code.sololearn.com/W8odKz78WT07/#html</a></p>
  
  <p>Or as an example, lets use this</p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/&gt;&lt;/th&gt;
              &lt;th&gt;&lt;img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/&gt;&lt;/th&gt;
              &lt;th&gt;&lt;img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/&gt;&lt;/th&gt;
              &lt;th&gt;&lt;img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/&gt; &lt;/th&gt;
              &lt;th&gt;&lt;img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;th&gt; &lt;p class="comparisons"&gt;Operating Systems&lt;/p&gt;
                  &lt;td class="center"&gt;Web&lt;/td&gt;
                  &lt;td class="center"&gt;Web&lt;/td&gt;
                  &lt;td class="center"&gt;Web&lt;/td&gt;
                  &lt;td class="center"&gt;Web&lt;/td&gt;
                  &lt;td class="center"&gt;Web&lt;/td&gt;
              &lt;/th&gt;
  
          &lt;/tr&gt;
              &lt;th&gt;&lt;p class="comparisons"&gt;Mobile compatibility&lt;/p&gt;
                  &lt;td&gt;&lt;img style="padding-left:20px" title="iOS and Android" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;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"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;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"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;img style="padding-left:20px" title="iOS and Android"  src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;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"&gt;&lt;/td&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>CSS being applied:</p>
  
  <pre><code>.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*/
  
  }
  </code></pre>
  
  <p>Is there any way I can make these rows collapsible, while showing the name of the Row (the <code>&lt;p&gt;</code> tag, so simply collapsing all of the <code>&lt;td&gt;</code>) still, while only using HTML/CSS? Or do I have to include JavaScript?</p>