/* Use Bootstrap 3's responsive wrapper as the scroll container */
.table-responsive {
    max-height: 80vh; /* This works beautifully to restrict height */
    overflow: auto; /* Ensures both horizontal and vertical scrolling */
}

/* Ensure borders don't collapse, otherwise sticky header borders disappear */
.table-responsive > .table {
    border-collapse: separate;
    border-spacing: 0;
}

/* 1. Freeze the Top Header Row */
.table-responsive th {
    position: sticky;
    top: 0;
    background-color: #304A6B; /* Match Bootstrap 3's light gray header look */
    z-index: 2;
    border-bottom: 2px solid #ddd !important;
}

    /* 2. Freeze the Left-most Column */
    .table-responsive td.freeze-col,
    .table-responsive th.freeze-col {
        position: sticky;
        left: 0;
        background-color: #fff; /* Must have a solid background color */
        z-index: 1;
        border-right: 1px solid #ddd;
    }

    /* 3. The Intersection Cell (Top-Left corner) */
    .table-responsive th.freeze-col {
        z-index: 3; /* Keeps the top-left index above row headers and column data */
        background-color: #304A6B;
    }