Visuall esthetic of Revit Reports

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 20px;
    color: #333;
}

table {
    width: 50%;
    border-collapse: collapse;
    margin: 0 auto;
}

th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {
    background-color: #f5f5f5;
}

.highlight-red {
    background-color: #ff0000;
}

.highlight-green {
    background-color: #98fb98;
}

// First, we find all the rows in the table
var rows = document.querySelectorAll("table tr");

// We use a Map to store references to cells we want to merge
var cellsToMerge = new Map();

// We also create a Map to store a list of "Elements" cells for each error type
var associatedCells = new Map();

// We loop over each row
for (let row of rows) {
    // We find the first cell in the row (the error message cell)
    let cell = row.cells[0];
    let associatedCell = row.cells[1];

    // If we've already seen this error...
    if (cellsToMerge.has(cell.textContent)) {
        cellsToMerge.get(cell.textContent).push(cell);
        associatedCells.get(cell.textContent).push(associatedCell);
    } 
    else {
        cellsToMerge.set(cell.textContent, [cell]);
        associatedCells.set(cell.textContent, [associatedCell]);
    }
}

// Now we go over each list of cells and merge them
for (let [key, cells] of cellsToMerge) {
    if (cells.length > 1) {
        cells[0].setAttribute("rowspan", cells.length);

        for (let i = 1; i < cells.length; i++) {
            cells[i].remove();
        }
    }

    cells[0].addEventListener('click', function() {
        for (let cell of associatedCells.get(key)) {
            cell.style.display = cell.style.display === 'none' ? '' : 'none';
        }
    });

    for (let cell of associatedCells.get(key)) {
        cell.style.display = 'none';
    }

    var newCell = document.createElement("td");
    newCell.textContent = associatedCells.get(key).length;
    cells[0].parentNode.appendChild(newCell);
}

// We create a button to hide all elements
var collapseButton = document.createElement("button");
collapseButton.textContent = "Hide all";

collapseButton.addEventListener('click', function() {
    for (let cellGroup of associatedCells.values()) {
        for (let c of cellGroup) {
            c.style.display = 'none';
        }
    }
});