Style table, row border

HTML & CSS
1

Hi all

I have a jsfiddle here - https://jsfiddle.net/rkbw5ntz/5/

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.

2

How about a shadow?

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

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

4

Why Not ?

e.g.

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

My mistake sorry, it does work

6

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