HTML and CSS table/grid design - html

Question

I was trying to design table below. I tried to use a HTML table but I couldn't get the box shadow to apply properly as I had to round the corners of the first and last td cells and not the tr (as it doesn't support a border radius) but then applying a box shadow to the row didn't go round the curved edges, rather it stayed square.
I also tried display:grid & flex, however, I could find a way to get the box-shadow/border-radius and centre align the text within columns, it was a trade off.
So any advice would be much appreciated.
This is what I was trying to convert to HTML and CSS.
This is the react code is use 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>

Answer 1

I would do something like this, using flex:
body {
background-color: #eefbfb;
font-family: sans-serif;
font-size: 16px;
}
.policy-table {
color: grey;
text-align: center;
}
.headings, .policy {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 1em;
padding: 1em;
}
.heading {
flex-basis: 33.333%;
font-weight: bold;
}
.policy {
border-radius: 2em;
background-color: white;
margin-bottom: 20px;
-moz-box-shadow: 0 0 3px grey;
-webkit-box-shadow: 0 0 3px grey;
box-shadow: 0 0 5px grey;
}
span {
flex-basis: 33.333%;
}
a {
text-decoration: none;
color: #4c4c4c;
}
<div class="policy-container">
<div class="policy-table">
<div class="headings">
<span class="heading">Name</span>
<span class="heading">Last Updated</span>
<span class="heading">Actions</span>
</div>
<div class="policy">
<span>Name</span>
<span>DD MM YY</span>
<span>
<a href={row.link}>view</a>
</span>
</div>
<div class="policy">
<span>Name</span>
<span>DD MM YY</span>
<span>
<a href={row.link}>view</a>
</span>
</div>
</div>
</div>