Twitter Bootstrap Question posted in

Bootstrap – Can't get "table-striped" – Twitter bootstrap

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search