Merge Adjacent Cells In An HTML Table - jQuery Table-Merger.js

Table-Merger.js is a jQuery plugin which enables you to merge adjacent cells (td) in an HTML table just like the MS Word and MS Excel. Only works on table cells in the same row or column

How to use it:

1. Download and load the Table-Merger.js script after the latest version.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="table-merger.js"></script>

2. Call the table_merger method on the target html table. This method can be used on any HTML table object to merge cells (td).

<table id="demo">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

table_merger('#demo');

3. Style the table cells when selected.

td.selected {
  color: rgb(210,118,4);
  border-color: #ff8d00 !important;
}

4. Style the table cells when hidden.

td.hidden {
  display: none;
}

5. Add an extra CSS Class to the table cells to be merged.

table_merger('#demo', 'custom-class');

---

This awesome jQuery plugin is developed by velovsky. For more Advanced Usages, please check the demo page or visit the official website.