Menu
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?
480
Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl} , making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.
Use the combination of table and table-stripped classes within the <table> tag to create a striped table.
By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
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.
192
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
