Transpose banner table

<style>
table {
    padding-bottom: 100px;
}
table td:first-child {
    white-space: nowrap;
}

table tr:first-child td {
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    text-align: left;
}
table tr:first-child td b {
    display: inline-block;
    font-weight: normal;
    letter-spacing: 0.1px;
}
table tr:first-child td b a {
    padding: 5px 2px 0 2px;
}

table .banner-preview {
    display: none;
    position: absolute;
    bottom: 108%;

    writing-mode: horizontal-tb;
    transform: rotate(-180deg);
    left: calc(100% + 0.4em);

    background: white;
    border: 1px solid #888;
    padding: 5px;
}
table .move-right .banner-preview {
    left: unset;
    right: calc(100% + 0.6em);
}

table .banner-preview span {
    display: inline-block;
    color: black;
    margin-top: 5px;
    font-size: 14px;
}

table a:hover .banner-preview {
    display: block;
}

/* transposed table */
table.transposed {
    margin-bottom: 250px;
}
table.transposed tr:first-child td {
    transform: unset;
    writing-mode: unset;
}
table.transposed tr:first-child td b {
    font-weight: bold;
    white-space: nowrap;
}
table.transposed td:nth-child(n+2) {
    text-align: right;
}
table.transposed .banner-preview {
    left: 250px;
    right: unset;
    bottom: unset;
    transform: translateY(3px);
    writing-mode: unset;
}
table.transposed .banner-preview img {
    display: block;
}
</style>

<script>
const BASE_FOLDER = "https://st.gsmarena.com/imgroot/static/banners/self/";

window.addEventListener("DOMContentLoaded", function () {
    const table = document.querySelector("table");
    const links = table.querySelectorAll("a");
    for (const link of links) {
        const match = link.innerText.match(/(?:(?:\[[^\]]+\])|(?:[dma]-))(.+)/);
        if (!match) continue;

        const container = document.createElement("div");
        container.classList = "banner-preview";

        const image = document.createElement("img");
        image.src = BASE_FOLDER + match[1];

        const text = document.createElement("span");
        text.innerText = link.innerText;

        container.appendChild(image);
        container.appendChild(text);
        link.appendChild(container);

        link.onmouseenter = function () {
            const banner = this.querySelector(".banner-preview");
            const rect = banner.getBoundingClientRect();
            const image = banner.querySelector("img")

            setTimeout(function () {
                if (rect.right > screen.width) {
                    banner.style.left = (rect.right - screen.width + 30) + "px";
                } else if (rect.left < 0) {
                    banner.style.left = (rect.left) + "px";
                } else {
                    banner.style.left = "";
                }
            }, 0);
        };
        link.onmouseleave = function () {
            const banner = this.querySelector(".banner-preview");
            banner.style.left = "";
        };
        if (link.getBoundingClientRect().left < 500) link.classList.add("move-right");
    }

    function transposeTable() {
        const isTransposed = table.classList.contains("transposed");
        const tbody = table.tBodies[0];
        const rows = tbody.querySelectorAll("tr");
        const rowColors = [];
        const data = [];
        for (let i = 0; i < rows.length; i++) {
            data[i] = [];
            const cells = rows[i].querySelectorAll("td");
            for (let j = 0; j < cells.length; j++) {
                data[i][j] = rows[i].removeChild(cells[j]);
            }
            if (!isTransposed) rowColors[i] = rows[i].bgColor || rows[i].style.background;
            rows[i].remove();
        }

        if (isTransposed) {
            const colgroup = table.querySelector("colgroup");
            for (const col of colgroup.querySelectorAll("col")) {
                rowColors.push(col.style.background);
            }
            colgroup.remove();
        }

        const newRows = [];
        for (let i = 0; i < data[0].length; i++) {
            const newRow = document.createElement("tr");
            if (isTransposed) newRow.style.background = rowColors[i];
            tbody.appendChild(newRow);
            newRows.push(newRow);
        }

        for (let i = 0; i < newRows.length; i++) {
            const row = newRows[i];
            for (let j = 0; j < data.length; j++) {
                row.appendChild(data[j][i]);
            }
        }

        if (!isTransposed) {
            const colgroup = document.createElement("colgroup");
            table.appendChild(colgroup);
            for (let c of rowColors) {
                const col = document.createElement("col");
                col.style.background = c;
                colgroup.appendChild(col);
            }
        }

        table.classList.toggle("transposed");
    }
    table.onclick = transposeTable;
});
</script>