Bootstrap CSS not applied to table td

Question

I'm trying to get rid of the "border-top: 1px solid #dddddd;" for a specific table on my Bootstrap site.

Making the change using inline styling works as expected:

<td style="border-top:none; font-weight:bold;">

However, when I try to add this into the bootstrap.css file, the font-weight is applied, but the border-top is not:

<td class="notop">

CSS (have tried with '!important' as well):

.notop {
  border-top:none;
  font-weight:bold;
}

Any suggestions as to why this would work inline, but not via CSS?

possible duplicate of [How to overwrite styling in Twitter Bootstrap](http://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap) — dsgriffin, Jul 12 '13 at 23:41

score 2 · Accepted Answer · answered Jul 12 '13 at 23:43

Initially I was going to suggest that it was happening because of the cascading nature of style sheets, but you said you used !important

Just to check, your code with !important looked like this:

.notop {
  border-top:none !important;
}

Sometimes CSS can be really funny with how !important is used. Also, is the CSS sheet external, or embedded? Again, the order of sheets can often cause weird errors like this.

Edit: Also, if it's an external style sheet, make sure it's included after the bootstrap CSS.

Thanks! I did apply '!imporant' correctly, but it appears that the problem was in the order in which my stylesheets were being called in the header file. — dropknow1edge, Jul 12 '13 at 23:47

Bootstrap CSS not applied to table td

1 Answers1