0

I'm trying to add a darker border to the bottom of specific rows in my table.

I've added a custom class to the rows (des-rec-row) and have included the following in my CSS:

.des-rec-row {
  border-bottom: 1px solid #111;
}

In Chrome's dev tools, the class and css property is showing as active, but the border isn't correct. I can hover over the property and see where the border should be.

I've also reproduced this in https://jsfiddle.net/onLuw2pa/. If you add border-bottom: 1px solid black in the dev tools to any of the rows, nothing happens.

Is this a specificity issue? Is it inheritance? Is there overlap happening? I'll admit CSS isn't my specialty, can someone help me solve this?

EDIT----

Updated jsFiddle with ineffective CSS: https://jsfiddle.net/n3o78yL1/

GISUser9
  • 125
  • 2
  • 8

1 Answers1

1

You cant add border to tr, However you can add it to each td inside it and it'll look the same.

Edit Your css and make it: 

.even td {
  border-bottom: 1px solid red;
}

Working fiddle: https://jsfiddle.net/c50tj8fr/

Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34