css td background color covers the outline color

Question

I have a table where the corresponding column and row will be highlighted when mouse is over the cell. The cell also can be highlighted when it is clicked. My problem is that the outline here (red and blue) is covered by the background colour of the cell when clicked.

I am wondering how to make the outline cover the background colour of the cell.

Here is the code I am trying.

$(function () {
    $('td').click(function () {
        $(this).toggleClass('clicked_cell')
    })
})

            th{
                font-weight: normal;
                align-content: center;
                position: relative;
                text-align: center;

            }
            td {
                border: black solid;
                border-width: 1px 2px 1px 1px;
                padding: 5px;
                text-align: center;
                height:1.1cm;
                width:1.1cm;
                position: relative;
                background-clip: padding-box;
            }
            .col{
                width: 1.1cm;
            }
            .rotate {
                text-align: center;
                white-space: nowrap;
                 vertical-align: middle;
                width: 1.5em;
                }
            .rotate div {
                -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
                -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
                -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
                filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
                margin-left: -0.8cm;
                 margin-right: -0.8cm;
                }
            .float-left {
                width: 25%;
                float: left;
            }
            .circle1{
                height: 0.6cm;
                width: 4.65cm;
                outline: 2px dashed red;
                margin-top: -0.3cm;
                position:absolute;
                text-align: left;
                
            }
            .circle2{
                height:4.8cm;
                width:0.6cm;
                outline: 2px dashed rgb(0, 0, 255);
                position:absolute;
                text-align: center;
                margin-left: 0.35cm;
                
            }
            tr.hl:hover th:not([rowspan]),
            tr.hl:hover td {
                background-color: rgba(0,255,255,0.2);
            }
            td:hover::before {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                width: 100%;
                top: 0;
            }
            td:hover::after,
            .col:hover::after {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                height: 2000%;
                width: 100%;
                bottom: -1000%;
                left: 0;
                pointer-events: none;
            }
            table{
                overflow: hidden;
            }
            thead th{
                background-color:white;
                z-index: 1;
                box-shadow: 0 0 0 2px white;
            }
        .clicked_cell{
            background-color: gold !important;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <thead>


        <tr>
            <th colspan=5 style="text-align: right" >Player 1's Payoffs </th>
        </tr>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=3 style="font-size: smaller;">Player 2's actions</th>
        </tr>
        </thead>
        <tr>
            <th colspan="2"></th>
            <th class="col" style="text-align: center">d</th>
            <th class="col" style="vertical-align: top"><div class="circle2">e</div></th>
            <th class="col" style="text-align: center">f</th>
        </tr>

        <tr class="hl">
            <th rowspan=3 class="rotate" style="font-size: smaller;"> <div>Player 1's actions</div></th>
            <th><div class="circle1">a</div></th>
            <td>8</td>
            <td>20</td>
            <td>12</td>
        </tr>
        <tr class="hl">
            <th>b</th>
            <td>0</td>
            <td>8</td>
            <td>16</td>
        </tr>
        <tr class="hl">
            <th>c</th>
            <td>18</td>
            <td>12</td>
            <td>6</td>
        </tr>

    </table>

Or I should change the method of circles in the table?

Answer 1

You can use z-index to control the placement of the outlines above other elements, and pointer-events to make the elements below available for clicking/tapping.

.circle1,
.circle2 {
    z-index: 10; /* Lift it above other elements */
    pointer-events: none; /* Make it "unclickable" */
}

Note that a absolute or relative positioning rule is required for the z-index to take effect. You already have this on your .circle elements.

EDIT: Here is a working example using your snippet:

$(function () {
    $('td').click(function () {
        $(this).toggleClass('clicked_cell')
    })
})

            th{
                font-weight: normal;
                align-content: center;
                position: relative;
                text-align: center;

            }
            td {
                border: black solid;
                border-width: 1px 2px 1px 1px;
                padding: 5px;
                text-align: center;
                height:1.1cm;
                width:1.1cm;
                position: relative;
                background-clip: padding-box;
            }
            .col{
                width: 1.1cm;
            }
            .rotate {
                text-align: center;
                white-space: nowrap;
                 vertical-align: middle;
                width: 1.5em;
                }
            .rotate div {
                -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
                -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
                -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
                filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
                margin-left: -0.8cm;
                 margin-right: -0.8cm;
                }
            .float-left {
                width: 25%;
                float: left;
            }
            .circle1{
                height: 0.6cm;
                width: 4.65cm;
                outline: 2px dashed red;
                margin-top: -0.3cm;
                position:absolute;
                text-align: left;
                z-index: 10;
                pointer-events: none;
            }
            .circle2{
                height:4.8cm;
                width:0.6cm;
                outline: 2px dashed rgb(0, 0, 255);
                position:absolute;
                text-align: center;
                margin-left: 0.35cm;
                z-index: 10;
                pointer-events: none;
            }
            tr.hl:hover th:not([rowspan]),
            tr.hl:hover td {
                background-color: rgba(0,255,255,0.2);
            }
            td:hover::before {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                width: 100%;
                top: 0;
            }
            td:hover::after,
            .col:hover::after {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                height: 2000%;
                width: 100%;
                bottom: -1000%;
                left: 0;
                pointer-events: none;
            }
            table{
                overflow: hidden;
            }
            thead th{
                background-color:white;
                z-index: 1;
                box-shadow: 0 0 0 2px white;
            }
        .clicked_cell{
            background-color: gold !important;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <thead>


        <tr>
            <th colspan=5 style="text-align: right" >Player 1's Payoffs </th>
        </tr>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=3 style="font-size: smaller;">Player 2's actions</th>
        </tr>
        </thead>
        <tr>
            <th colspan="2"></th>
            <th class="col" style="text-align: center">d</th>
            <th class="col" style="vertical-align: top"><div class="circle2">e</div></th>
            <th class="col" style="text-align: center">f</th>
        </tr>

        <tr class="hl">
            <th rowspan=3 class="rotate" style="font-size: smaller;"> <div>Player 1's actions</div></th>
            <th><div class="circle1">a</div></th>
            <td>8</td>
            <td>20</td>
            <td>12</td>
        </tr>
        <tr class="hl">
            <th>b</th>
            <td>0</td>
            <td>8</td>
            <td>16</td>
        </tr>
        <tr class="hl">
            <th>c</th>
            <td>18</td>
            <td>12</td>
            <td>6</td>
        </tr>

    </table>

Answer 2

As far as I can see, if you want to keep the whole area clickable, the best way would be to reduce the clicked_cell opacity:

You can use:

.clicked_cell {
    background-color: rgba(255, 215, 0, 0.5) !important;
}