Style table, row border

Hi all

I have a jsfiddle here -

Its a super simple table that I would like to style to not look so dull.

I would like to separate the rows which I’m doing with border-bottom on the row.

My problem is I would like to add a second bottom border to the th to separate it from the table.

I’m doing it here by adding an empty tr with tds that I’m coloring and adding padding.

This work but seems like a bad way of doing it.

Is there a better way to do this.

How about a shadow?

th {
  box-shadow: inset 0 -4px #d00;
1 Like

Sort of works but I cant have the white border below the th as well

Why Not ?


th {
  box-shadow: inset 0 -4px #d00;
  border-bottom:4px solid #fff;

My mistake sorry, it does work

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.