Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working.
Can anyone provide insights on why this is happening?
<div class="overflow-x-auto lg:overflow-visible">
<div>
<table class="border-collapse table-fixed w-[1000px] lg:table-auto lg:w-full border border-grey-200">
<thead class="bg-grey-200">
<th class="sticky left-0 top-0 p-4 z-10 shadow-grey w-[116px] lg:w-[140px] bg-grey-200"></th>
<th class="p-4 align-middle text-body-30-m text-left" v-for="(header, headerIndex) in data.headerColumns" :key="headerIndex">
{{ header }}
</th>
</thead>
<tbody>
<tr class="border border-b-grey-200" v-for="(row, rowIndex) in data.rows" :key="rowIndex">
<td class="border border-r-grey-200 align-top" :class="
cell.icon
? `grid p-4 justify-center border-0`
: cell.image
? `text-center p-4 sticky left-0 shadow-grey bg-white z-10 w-[116px] lg:w-[140px] `
: cell.text
? `text-left p-4 pr-8`
: `p-4`
" v-for="(cell, cellIndex) in row.cells" :key="cellIndex">
<div v-if="!cell.text && !cell.icon && cell.image && cell.link" class="grid grid-flow-row gap-3">
<img :src="cell.image" :alt="cell.altText" />
<span>{{ cell.link }}</span>
</div>
<span v-if="!cell.image && !cell.link && !cell.text"><smyths-icons
v-if="cell.icon"
:name="cell.icon"
size="24"
color="#008540"
></smyths-icons
></span>
<span v-if="!cell.image && !cell.link && !cell.icon">{{
cell.text
}}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>