Create Table with Rounded Corners

Your site is locked down (We will be back soon!). Can’t view site, can’t help.

Oops Sorry! I had it under construction mode. It is now live, I’ll change it back to construction mode as soon as this is solved.

I don’t think merely adding border-radius will work for a table.

Try to see if you can implement this fiddle: https://jsfiddle.net/MuZzz/1/ or this https://jsfiddle.net/davidThomas/eYg78/2/

And you can put the site back in under construction mode.

That gave me a line in the center, but the corners still aren’t rounded ??

Hi @sommerv

By default Vantage only adds bottom border to table rows. Turning that into a conventional table look with borders between each cell is something we can help with. You could try the following in a Custom CSS plugin or child theme style.css file:

table {
  border: 1px solid #eaeaeb;
  margin: 0 0 1.78571em;
  width: 100%;
}
table th,
table td {
  border: 1px solid #eaeaeb;
  padding: 0.75em;
}
@media (max-width: 480px) {
  .resp table th, .resp
  table td {
    padding: 2%;
  }
}
table th {
  font-weight: 600;
}

Rounding those borders is, unfortunately, a little more than we’re able to cover as part of theme support. Perhaps someone else will be able to jump in and help.

Sorry we don’t have more on this.