css box shadow on thead that has sticky position - html

Question

I'm styling a table with CSS, I want my th has box shadow when its position is sticky. I've tried but I want to get rid the shadow that's in the right (so I'm expecting the shadow only appear in the bottom of the th element)
this is my table CSS
table {
text-align: left;
position: relative;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th {
font-family: $font2;
font-size: 13px;
font-weight: 700;
padding: 12px 16px;
padding-right: 32px;
color: #555;
background: white;
position: -webkit-sticky;
position: sticky;
border-bottom: 5px solid #eee;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

Answer 1

You can do it with javascript, check the below snippet
const header = document.querySelectorAll('.fixed-top');
const rowObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
header.forEach(th => th.classList.add('noShadow'));
} else {
header.forEach(th => th.classList.remove('noShadow'));
}
});
rowObserver.observe(document.querySelector('.observed-row'));
div {
display: flex;
max-height: 20rem;
overflow: auto;
}
table {
border-spacing: 0;
}
th {
text-align: left;
}
th,
td {
border-bottom: 1px solid #c6c6c6;
height: 5rem;
white-space: nowrap;
padding-right: 2rem;
}
.fixed-top {
background-color: white;
position: sticky;
box-shadow: 0 10px 6px -5px rgba(0, 0, 0, 0.4);
top: 0;
z-index: 2;
}
.noShadow {
box-shadow: none !important;
}
<div>
<table>
<thead>
<tr>
<th class="fixed-top">Column 1</th>
<th class="fixed-top">Column 2</th>
<th class="fixed-top">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Row One</td>
<td class="observed-row">1</td>
</tr>
<tr>
<td>2</td>
<td>Row Two</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Row Three</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>Row Four</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Row Five</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>Row Six</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>

Answer 2

You can understand by the syntax below taken from MDN:
th{
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0px 5px 2px -2px rgba(0, 0, 0, 0.2);
}
You can decrease the spread-radius until the shadow doesn't extend to lefft or right sides.. It will make your shadow a little smaller though
Edit: I think I understand your problem now.. A similar Problem
Summary: It's not possible to use box-shadow like you mention. Just use pseudo-elements to simulate a shadow to the bottom.
I assume you want shadow on each of the th boxes, so putting shadow on tr:has(th) is not possible