CODEWITHSUNDEEP
javascripthtmltwitter-bootstraptwitter-bootstrap-3
Editor
Editor

Reputation: 632

Bootstrap - Can't get "table-striped"

I'm using table-stripped with Twitter Bootstrap.

I can target any other element with hover, everthing is good without table-striped but when I using table-striped and some elements can not be activated.

The reason this: table-striped

You can see on JSFiddle for demo

How can I fix this?

Upvotes: 0

Views: 101

Answers (2)

Venkat
Venkat

Reputation: 265

Actually your fiddle doesn't load bootstrap.css file.

table-striped is a bootstrap class but it is not loaded in your application so you created a css for the class table-striped

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e1e1e1;
}

By loading the bootstrap file in the application, you just need to change the css selector by 

.myTip > td, .myTip > th {
  background-color: red;
}

Here is the Demo link

Upvotes: 1

slashsharp
slashsharp

Reputation: 2833

It's because of CSS specificity.

Increase your CSS selector specificity value or use !important if you're lazy to override bootstrap CSS selectors.

table.table.table-striped tr.myTip td {
 background: red;
}

or

.myTip td {
 background: red !important;
}

Demo

Upvotes: 2

Related Questions