title: How to highlight/hover/click a selected group of consecutive row cells in HTML table
body: <p>I am trying to create an HTML table that allows highlighting/hovering/clicking on a group of consecutive row cells as one. Is there a way to group them with a wrapper element so that they react to a single hover/click event?</p>
  
  <p>I tried to wrap them in tbody/colgroup tags but that disturbs the layout of the table. Whatever wrappers I tried like div or span they disrupt the table alignment.</p>
  
  <p>This is the original HTML table </p>
  
  <pre><code>&lt;table class="table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;41.01&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;43.357&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;115&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;+2.56&lt;/span&gt; 
        &lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;12.10&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;23.80&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;3.49&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;4.05&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;41.78&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;43.15&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;114&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;+1.37&lt;/span&gt; 
        &lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;12.23&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;23.80&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;3.49&lt;/span&gt;&lt;/td&gt;
        &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;4.15&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;    
  </code></pre>
  
  <p>Output:</p>
  
  <p><img src="https://i.imgur.com/s26rAsi.jpg" alt="Original table alignment" title="original-table-alignment"></p>
  
  <p>The table wrapped in tbody to group the consecutive cells:</p>
  
  <pre><code>&lt;table class="table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
          &lt;tbody&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;41.01&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;43.357&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;115&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;+2.56&lt;/span&gt;&lt;/td&gt;
          &lt;/tbody&gt;
          &lt;tbody&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;12.10&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;23.80&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;3.49&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;4.05&lt;/span&gt;&lt;/td&gt;
          &lt;/tbody&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;tbody&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;41.78&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;43.15&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;114&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;+1.37&lt;/span&gt;&lt;/td&gt;
          &lt;/tbody&gt;
          &lt;tbody&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;12.23&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;23.80&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body"&gt;&lt;span class="td-value"&gt;3.49&lt;/span&gt;&lt;/td&gt;
          &lt;td class="td-body td-border-right"&gt;&lt;span class="td-value"&gt;4.15&lt;/span&gt;&lt;/td&gt;
          &lt;/tbody&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <p><img src="https://i.imgur.com/iqk0lpC.jpg" alt="Disturbed table alignment" title="disrupted-table-alignment"></p>
  
  <p>I expect the table to highlighted as below:</p>
  
  <p><img src="https://i.imgur.com/lTZgV3r.jpg" alt="Expected table highlighting" title="expected-table-highlighting"></p>
  
  <p>Appreciate your help!</p>