title: Change colspan of cells with identical content, so they appear to be merged
body: <p>I have got a table with redundant data in cells. [Left table]</p>
  <p>I need to join them into one cell. [Right table]</p>
  <p><img src="https://i.stack.imgur.com/HQOdY.png" alt="Illustration" /></p>
  <p>Structure of table:</p>
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td class=&quot;bold&quot;&gt;Value1:&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;A&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;A&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;A&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;B&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;B&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class=&quot;bold&quot;&gt;Value2:&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;C&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;C&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td class=&quot;green&quot;&gt;D&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I am able to hide redundant cell, but I need to set colspan somehow.</p>
  <pre><code>$(document).ready(function () {
  
  var all = $('.green');
  var seen = {};
  all.each(function () {
      var txt = $(this).text();
      if (seen[txt]) {
          $(this).hide();
      }
      else {
          seen[txt] = true;
      }
  });
  
  
  });
  </code></pre>