table {
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    th {
        background-color: #4CAF50;
        color: white;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
            th {
            cursor: pointer;
        }

        .sort-arrow {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            transition: transform 0.3s ease;
            font-size:10px;
        }
        th.asc .sort-arrow::before {
            content: "▲"; /* Up arrow */
        }

        th.desc .sort-arrow::before {
            content: "▼"; /* Down arrow */
        }
       
        th:not(.asc):not(.desc) .sort-arrow {
            display: none;
        }