JSFiddle - React, Tailwind, and code Playground

by jrick

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   
   <thead>
   <tr>
   <td height="61" bgcolor="#7581D0"><span class="Estilo1">Model</span></td>
   <td bgcolor="#7581D0"><span class="Estilo1">Length</span></td>
   <td bgcolor="#7581D0"><span class="Estilo1">Diameter</span></td>
   </tr>
   </thead>
   
   
   <tr bgcolor="#999999">
      <td height="25" bgcolor="#B5B5B5"><span class="Estilo10">KL-23 </span></td>
      <td bgcolor="#B5B5B5"><span class="Estilo10">6ft</span></td>
    <td bgcolor="#B5B5B5">0.5&quot;</td>
  </tr>
  <tr bgcolor="#DDDDDD"><td colspan="1" bgcolor="#444444"><p class="Estilo10">&nbsp;</p></td>
      <td colspan="1" bgcolor="#FFFFDD"><p class="Estilo10">5.5ft</p>
        <p class="Estilo10">5ft</p>
    <p class="Estilo10">4.5ft</p></td>
    <td colspan="1" bgcolor="#FFFFDD"><p class="Estilo10">0.56&quot;</p>
        <p class="Estilo10">0.5&quot;</p>
    <p class="Estilo10">0.47&quot;</p></td>
  </tr>
    
    

    <tr bgcolor="#999999">
      <td height="25" bgcolor="#D9D9D9"><span class="Estilo10">KL-21 </span></td>
    <td bgcolor="#D9D9D9"><span class="Estilo10">5ft</span></td>
    <td bgcolor="#D9D9D9"><span class="Estilo10">0.5&quot;</span></td>
  </tr>
    <tr bgcolor="#DDDDDD"><td colspan="1" bgcolor="#444444"><p class="Estilo10">&nbsp;</p>
        <p class="Estilo12">&nbsp;</p>
        <p class="Estilo10">&nbsp;</p></td>
      <td colspan="1" bgcolor="#FFFFDD"><p class="Estilo10">4.5ft</p>
        <p class="Estilo10">4ft</p>
      <p class="Estilo10">4ft</p></td>
      <td colspan="1" bgcolor="#FFFFDD"><p class="Estilo10">0.43&quot;</p>
        <p class="Estilo10">0.65&quot;</p>
      <p class="Estilo10">0.52&quot;</p></td>
  </tr>
  
  
  
    
    <tr bgcolor="#999999">
      <td height="25" bgcolor="#B5B5B5"><span class="Estilo10">KL-20 </span></td>
    <td bgcolor="#B5B5B5">4ft</td>
    <td bgcolor="#B5B5B5">0.4&quot;</td>
  </tr>
    <tr bgcolor="#DDDDDD"><td colspan="1" bgcolor="#444444"><p...

CSS

table{ width: 60%; }
p { line-height: 1.5; font-size: 0.7em }
.Estilo1 {
    color: #FFFFFF;
    font-weight: bold;
}
.Estilo10 {font-size: 14px}
.Estilo11 {color: #FFFFFF}
.Estilo12 {font-size: 14px; color: #FFFFFF; }

JavaScript

$(function() {
    $("td[colspan=1]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp("fast");
        } else {
            $target.closest("tr").next().find("p").slideToggle("fast");
        }
                 
    });
});