html table 常用設定

 <style>

.tableFixHead { overflow: auto; height: 300px; width: fit-content;}

.tableFixHead table { border-collapse: collapse; font:20px arial;}

.tableFixHead th, td { padding: 5px; border-radius: 1px; border: 1px solid lightgray;}

.tableFixHead thead { position: sticky; top: -1px; z-index: 1; background-color: gray; color: #fff; text-shadow: 1px 1px 2px #000; text-align:center;}

.tableFixHead tbody tr:nth-child(odd) { background-color: LemonChiffon;}

.tableFixHead tbody tr:nth-child(even) { background-color: AliceBlue;}

.tableFixHead tbody tr:hover { background-color: lightskyblue;}

.tableFixHead tbody tr.selected { border: 2px solid red; background-color: darkgray; color: #fff; text-shadow: 1px 1px 2px #000;}

</style>

<script>

    const rows = document.querySelectorAll('tbody tr');

    for (let i = 0; i < rows.length; i++) {

        rows[i].onclick = function () {

            highlightTableRow(this);

        };

    }

    function highlightTableRow(row) {

        const previouslySelectedRow = document.querySelector('tr.selected');

        if (previouslySelectedRow) {

            previouslySelectedRow.classList.remove('selected');

        }

        row.classList.add('selected');

    }

</script>