Can't get .table-striped class to work

Question

I can't get my table-stripe class to work with my Bootstrap framework.

Here's a live preview of my table. I have the .table-striped class set in my HTML, but it's not showing on the output.

What am I doing wrong?

Solution 1

Your html is wrong. You have a tbody tag for each row but the css for .table-striped relies on tr:nth-child() to style the rows differently:

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th

Fix your html so that you have a single tbody to iterate through.

Also, I saw both the bootstrap.css and bootstrap.min.css in your resources. One is enough.

Solution 2

The problem is with your table markup. You have each row wrappped in a tbody tag and according to the bootstrap documentation:

Adds zebra-striping to any table row within the via the :nth-child CSS selector (not available in IE7-8).

So if you go through and remove all the tbody tags so that there is just one at the beginning of your table body and one at the end, it should work as expected.

Comments

[StuartQ]

For future reference, it's better to post code samples rather than a link to a live site which is likely to change in the future, making this question less useful to others.

[Matt Newbill]

Adding my code here since I had same problem but didn't have code to look at in the question. lang-html <table class="table table-striped" id="process-monitor-data"><br /> <tr><br /> <th>Process <br />Index</th><br /> .......<br /> </tr><br /> <tr v-for="item in ProcessMonitorData" v-if="IsRowVisible(item)" :item="item"><br /> <td>{{item.ProcessMonitorIndex}}</td><br /> ...<br /> </tr><br /> </table>