can anyone please take a look at my code and can tell me how to use shadow box on both side of the column. right now i have shadow on the column. but its not seamless. I want it to be exactly like the same i have for the column when i hover over it.If anyone have any suggestion please let me know. Ty.
<style type="text/css">
table {
overflow: hidden;
}
td, th {
padding: 10px;
position: relative;
outline: 0;
}
/* body:not(.nohover) tbody tr:hover {
background-color: #ffa;
} */
td:hover::after,
td:focus::after
{
content: '';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
td:hover::after,
th:hover::after {
background: #eff1f5;
box-shadow: 0px -2px 21px 3px rgba(0, 0, 0, 0.23);
}
.active{
background: #eff1f5;
}
td:focus::after,
th:focus::after {
background-color: lightblue;
}
/* Focus stuff for mobile */
/* td:focus::before, */
tbody th:focus::before {
background-color: lightblue;
content: '';
height: 100%;
top: 0;
left: -5000px;
position: absolute;
width: 10000px;
z-index: -1;
}
</style>
<main>
<table>
<thead>
<tr>
<th></th>
<th class="col active">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
<th class="col">65kg</th>
<th class="col">70kg</th>
</tr>
</thead>
<tbody>
<tr>
<th class="row">160cm</th>
<td class="active">20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td class="active">18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tbody>
</table>
</main>
codepen link if anyone like to view : https://codepen.io/ajitdas/pen/XMBoqZ
