I have written a JS code to modify the structure of the table by parsing the webpage for particular table class and store the rows of the tables in an array. And use the array for the constructing a new table. The codes are below. (function() {    'use strict';    var headElements = new Array();    var bodyElements = new Array();    var tableElement;    var selector = .Tabelle-Titel-nur-oben;    function reinitialize() {        headElements = [];        bodyElements = [];        tableElement;    }    function constructTable(reference) {        tableElement = document.createElement('table');        var att = document.createAttribute(class); // Create a class attribute        att.value = demoTable; // Set the value of the class attribute        tableElement.setAttributeNode(att); // Add the class attribute to <h1>        appendRow(reference);    }    function appendRow(reference) {        var clonedTable = tableElement.cloneNode(true);        var headClass = document.createAttribute(class);        headClass.value = 'Zellen-Titel-nur-oben';        for (var i = 0; i < bodyElements.length; i++) {            for (var j = 0; j < headElements.length; j++) {                var row = clonedTable.insertRow();                var clonedRow = row.cloneNode(true);                var cell0 = clonedRow.insertCell();                var cloneHeadClass = headClass.cloneNode(true);                cell0.setAttributeNode(cloneHeadClass);                cell0.innerHTML = headElements[j].innerHTML;                var cell1 = clonedRow.insertCell();                cell1.innerHTML = bodyElements[i][j].innerHTML;                clonedTable.appendChild(clonedRow);            }        }        document.body.insertBefore(clonedTable, reference);    }    function selectTables(selector) {        var elements = document.querySelectorAll(selector);        for (var i = 0; i < elements.length; i++) {            parseHead(elements[i]);            parseBody(elements[i]);            constructTable(elements[i]);            reinitialize();        }    }    function parseHead(nodes) {        var theadElements = nodes.querySelectorAll('thead');        for (var i = 0; i < theadElements.length; i++) {            var rows = theadElements[i]['rows'];            for (var j = 0; j < rows.length; j++) {                var children = rows[j]['children'];                for (var k = 0; k < children.length; k++) {                    headElements.push(children[k]);                }            }        }    }    function parseBody(nodes) {        var children = 'children';        var tbody = 'tbody';        var tBodyElements = nodes.querySelectorAll(tbody);        for (var i = 0; i < tBodyElements.length; i++) {            var tBodyChildren = tBodyElements[i][children];            for (var j = 0; j < tBodyChildren.length; j++) {                // row level                var greatChildren = tBodyChildren[j][children];                var innerElements = [];                for (var k = 0; k < greatChildren.length; k++) {                    innerElements.push(greatChildren[k]);                }                bodyElements.push(innerElements);            }        }    }    selectTables(selector);})();The table structure:<table id=table-4 class=Tabelle-Titel-nur-oben ng-scope>    <colgroup>        <col class=Row-Column-27>            <col class=Row-Column-27>    </colgroup>    <thead>        <tr class=Row-Column-28>            <td class=Zellen-Titel-nur-oben>                <p class=Tabelle-Titel-oben>Mensch als Individualwesen</p>            </td>            <td class=Zellen-Titel-nur-oben>                <p class=Tabelle-Titel-oben>Mensch als Sozialwesen</p>            </td>        </tr>    </thead>    <tbody>        <tr class=Row-Column-29>            <td class=Zellen-Body-Rows-normal cell-style-override-6>                <p class=Flie-text-normal><span class=Fett>Eigene Wnsche</span>                </p>                <p class=Flie-text-normal>d.h., der Mensch steht im Mittelpunkt der Betrachtung.</p>            </td>            <td class=Zellen-Body-Rows-normal cell-style-override-6>                <p class=Flie-text-normal><span class=Fett>Miteinander</span>                </p>                <p class=Flie-text-normal>d.h., der Mensch ist von seiner Natur her auf ein soziales Miteinander bezogen und angewiesen.</p>            </td>        </tr>        <tr class=Row-Column-30>            <td class=Zellen-Body-Rows-normal>                <p class=Flie-text-normal>individual/individuell (lat.) = einzeln</p>            </td>            <td class=Zellen-Body-Rows-normal>                <p class=Flie-text-normal>socialis (lat.) = gesellschaftlich </p>            </td>        </tr>    </tbody></table>
Table structure modifier
javascript;dom