I would like to merge cells, that are in the same row and have the same text value inside them. There are many similar questions i found here, but all of them merge with a cell in another row.

This is how i would imagine it:

Before:
------------------------------------------------------------------------
|        A         |         A       |       A       |        B        |
------------------------------------------------------------------------
|        C         |         B       |       B       |        B        |
------------------------------------------------------------------------
|        C         |         C       |       D       |        E        |
------------------------------------------------------------------------

After:
------------------------------------------------------------------------
|                            A                       |        B        |
------------------------------------------------------------------------
|        C         |                         B                         |
------------------------------------------------------------------------
|                  C                 |       D       |        E        |
------------------------------------------------------------------------

Thank you in advance!

I would like to merge cells, that are in the same row and have the same text value inside them. There are many similar questions i found here, but all of them merge with a cell in another row.

This is how i would imagine it:

Before:
------------------------------------------------------------------------
|        A         |         A       |       A       |        B        |
------------------------------------------------------------------------
|        C         |         B       |       B       |        B        |
------------------------------------------------------------------------
|        C         |         C       |       D       |        E        |
------------------------------------------------------------------------

After:
------------------------------------------------------------------------
|                            A                       |        B        |
------------------------------------------------------------------------
|        C         |                         B                         |
------------------------------------------------------------------------
|                  C                 |       D       |        E        |
------------------------------------------------------------------------

Thank you in advance!

• javascript
• jquery
• html-table
• tablerow
• tablecell

• 3 Are you creating the table dynamically, or is it static? Is there a library used to create or affecting the table layout? – Teemu Commented May 6, 2020 at 12:41
• I am creating it using Thymeleaf and the table gets its layout from Bootstrap 4. – Maddin Commented May 6, 2020 at 12:50
• 1 The simplest way would be to do this when creating the table, but for that, we'd need the creation code. It is possible also on the client-side, but maybe a bit harder to implement. You've to decide which one you want, and edit the question accordingly. – Teemu Commented May 6, 2020 at 12:53
• @MaddinM, if you found any of the below answers helpful, please consider upvoting or accepting an answer. – derekbaker783 Commented May 6, 2020 at 19:49

4 Answers 4

You need to use colspan attribute in HTML, if you are using static data in your HTML table

 <table>
    <tr>
      <td colspan="3">A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td colspan="3">B</td>
    </tr>
    <tr>
      <td colspan="2">C</td>
      <td>D</td>
      <td>E</td>
    </tr>
  </table>

Assuming you had this HTML:

    <table id="table">
        <tr>
            <td colspan="1">A</td>
            <td colspan="1">A</td>
            <td colspan="1">A</td>
            <td colspan="1">B</td>
        </tr>
        <tr>
            <td colspan="1">C</td>
            <td colspan="1">B</td>
            <td colspan="1">B</td>
            <td colspan="1">B</td>
        </tr>
        <tr>
            <td colspan="1">C</td>
            <td colspan="1">C</td>
            <td colspan="1">D</td>
            <td colspan="1">E</td>
        </tr>
    </table>

You could do something similar to this in JS to merge the cells:

'use strict';

const deep = true;
const tableEl = document.getElementById('table').cloneNode(deep);
const nodesToRemove = [];

for (const childRow of tableEl.children) {
    let currNode = undefined;
    for (const td of childRow.children) {
        let lastNode = (currNode) ? currNode.cloneNode(deep) : undefined;
        currNode = td;
        if (lastNode && (lastNode.innerText === currNode.innerText)) {
            let colSpanVal = lastNode.getAttribute('colspan');
            currNode.setAttribute('colspan', Number(colSpanVal) + 1);
            lastNode = currNode.cloneNode(deep);
            nodesToRemove.push(currNode.previousElementSibling);
        }
    }
}

for (const node of nodesToRemove) {    
    node.remove();
}

document.getElementById('table').replaceWith(tableEl);

I think colspan is what you're looking for.

You can merge two or more table cells in a column by using the colspan attribute in a HTML tag (table data). To merge two or more row cells, use the rowspan attribute.

If you want to bine the first two cells in the first column, you can use the colspan="2" attribute in the first tag. The number represents how many cells to use (merge) for the tag.

However, If you want to bine the first two cells in the first column into one cell, you can use the rowspan="2" attribute in the first tag. The number represents how many cells to use for the tag.

N.B: You can also use "0" as the number in colspan and rowspan. All modern browsers treat a "0" (zero) in the colspan and rowspan as the maximum rows or columns. For example, instead of counting a table's rows, use rowspan="0" to expand the row to the end of the table. Using "0" is helpful for big tables and for dynamic tables where the number of rows and columns may change frequently.

For further details, visit https://www.puterhope./issues/ch001655.htm

Thank you!