Struggling to design the table below, I initially attempted using an HTML table. However, I encountered issues with applying box shadow properly as I needed to round the corners of the first and last td cells rather than the tr element (which doesn't support a border radius). Even when trying to apply a box shadow to the row, it did not round the curved edges as desired.
I also experimented with display:grid & flex, but couldn't find a solution to achieve both the box-shadow/border-radius effect and center aligning the text within columns simultaneously.
Any advice on how to tackle this would be greatly appreciated.
This is the design I was attempting to recreate using HTML and CSS:
https://i.sstatic.net/XpodM.png
The following is the react code snippet used to render the HTML for the table:
<div className="policy-container">
<div className="policy-table">
<div className="headings">
<span className="heading">Name</span>
<span className="heading">Last Updated</span>
<span className="heading">Actions</span>
</div>
{data.map((row, ri) => (
<div key={ri} className="policy">
<span>{row.name}</span>
<span>{row.lastUpdated.format("Do MMM YYYY")}</span>
<span>
<a href={row.link}>view</a>
</span>
</div>
))}
</div>
</div>