rvdveen27 Posted June 16, 2015 Share Posted June 16, 2015 Hello all, I have a striped table on my website which looks like this: Now I'd like to have all the rows with an even number to be a different color. I've tried changing things in the CSS file, but I cannot figure out at all how to do this. I also checked: http://getbootstrap.com/css/#tables but that also did not help me figure out how to get this working. Here's my CSS code: .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) { background-color: #f9f9f9; } Would be great if someone could explain me how to do this, thanks in advance. Quote Link to comment Share on other sites More sharing options...
requinix Posted June 17, 2015 Share Posted June 17, 2015 What's your HTML markup? Are you using a ? Quote Link to comment Share on other sites More sharing options...
rvdveen27 Posted June 17, 2015 Author Share Posted June 17, 2015 Yes <tbody> <tr> <td><?php echo $rank; ?></td> <td><?php echo $row['username']; ?></td> <td>€<?php echo htmlentities($row['profit'], ENT_QUOTES, 'UTF-8'); ?></td> <td><?php echo $row['deliveries']; ?></td> <td><?php echo htmlentities($row['distance'], ENT_QUOTES, 'UTF-8'); ?> KM</td> </tr> </tbody> Quote Link to comment Share on other sites More sharing options...
requinix Posted June 17, 2015 Share Posted June 17, 2015 https://jsfiddle.net/a9enhzp9/ Works for me. Have you checked the silly things, like not using the table-striped class, or other CSS overriding the striping? 1 Quote Link to comment Share on other sites More sharing options...
rvdveen27 Posted June 17, 2015 Author Share Posted June 17, 2015 (edited) I have checked and I'm sure that I'm using the table striped class: <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>Driver</th> <th>Profit</th> <th>Deliveries</th> <th>Distance</th> </tr> </thead> <?php $rank = 0; foreach($rows as $row): ++$rank; ?> <tbody> <tr> <td><?php echo $rank; ?></td> <td><?php echo $row['username']; ?></td> <td>€<?php echo htmlentities($row['profit'], ENT_QUOTES, 'UTF-8'); ?></td> <td><?php echo $row['deliveries']; ?></td> <td><?php echo htmlentities($row['distance'], ENT_QUOTES, 'UTF-8'); ?> KM</td> </tr> </tbody> <?php endforeach; ?> </table> With the package I'm using comes a 5800 lines CSS file. I'm not quite sure which other CSS could override the striping? Any suggestions like that? Here's the CSS code for every related to tables: table { max-width: 100%; background-color: transparent; } th { text-align: left; } .table { width: 100%; margin-bottom: 20px; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } .table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; } .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td { border-top: 0; } .table > tbody + tbody { border-top: 2px solid #ddd; } .table .table { background-color: #fff; } .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px; } .table-bordered { border: 1px solid #ddd; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid #ddd; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 2px; } .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) { background-color: #f9f9f9; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #f5f5f5; } table col[class*="col-"] { position: static; display: table-column; float: none; } table td[class*="col-"], table th[class*="col-"] { position: static; display: table-cell; float: none; } .table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th { background-color: #f5f5f5; } .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th { background-color: #e8e8e8; } .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { background-color: #dff0d8; } .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover, .table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th { background-color: #d0e9c6; } .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { background-color: #d9edf7; } .table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover, .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th { background-color: #c4e3f3; } .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { background-color: #fcf8e3; } .table-hover > tbody > tr > td.warning:hover, .table-hover > tbody > tr > th.warning:hover, .table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th { background-color: #faf2cc; } .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { background-color: #f2dede; } .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th { background-color: #ebcccc; } @media (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td { white-space: nowrap; } .table-responsive > .table-bordered { border: 0; } .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; } .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; } .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th, .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; } } Edited June 17, 2015 by rvdveen27 Quote Link to comment Share on other sites More sharing options...
requinix Posted June 17, 2015 Share Posted June 17, 2015 (edited) Still working. https://jsfiddle.net/s9c34k71/ Check if your browser is reporting errors. See what CSS is being applied to the rows. Poke around and see what you can find. Unless this is somewhere we can inspect? Edited June 17, 2015 by requinix 1 Quote Link to comment Share on other sites More sharing options...
mikosiko Posted June 17, 2015 Share Posted June 17, 2015 Are you sure that you are including the bootstrap CSS in your code, are you? Quote Link to comment Share on other sites More sharing options...
rvdveen27 Posted June 17, 2015 Author Share Posted June 17, 2015 (edited) Still working. https://jsfiddle.net/s9c34k71/ Check if your browser is reporting errors. See what CSS is being applied to the rows. Poke around and see what you can find. Unless this is somewhere we can inspect? You could inspect it here: http://emeraldimmersiontrucking.com/commitlog.php It's the same table-code used as the driverranks table that I gave you. Are you sure that you are including the bootstrap CSS in your code, are you? Yes I am, because as soon as I channge the background color of: .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) { background-color: #f9f9f9; } It changes the color of all the rows in the table. Edited June 17, 2015 by rvdveen27 Quote Link to comment Share on other sites More sharing options...
Solution mikosiko Posted June 17, 2015 Solution Share Posted June 17, 2015 you are generating a <tbody>...</tbody> tags inside of your foreach loop... take those out of the loop and test Quote Link to comment Share on other sites More sharing options...
requinix Posted June 17, 2015 Share Posted June 17, 2015 You could inspect it here: http://emeraldimmersiontrucking.com/commitlog.phpI could, but it seems you've disabled right-click to prevent your code from being "stolen". Quote Link to comment Share on other sites More sharing options...
rvdveen27 Posted June 17, 2015 Author Share Posted June 17, 2015 I could, but it seems you've disabled right-click to prevent your code from being "stolen". That's only temporary. Press F12 and it still works (is the same thing as right click). Quote Link to comment Share on other sites More sharing options...
rvdveen27 Posted June 18, 2015 Author Share Posted June 18, 2015 you are generating a <tbody>...</tbody> tags inside of your foreach loop... take those out of the loop and test Wauw.. Switching the foreach loop to be inside of the <tbody>..</tbody> tags solved the issue. I had no idea it would have been so simple. Thank you a lot kind Sir Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.