How to create zebra stripes on html table without using javascript and even/odd classes generation?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
CSS Zebra Stripe a Specific Table tr:nth-child(even)
Your code looks like this:
.zebra_stripe{
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
}
This is wrong (obviously, or you wouldn't need to ask the question), but isn't that far off.
The solution is that you simply need to include .zebra_stripe in the existing CSS selectors. CSS doesn't support multiple tiers of selectors in braces, the way you wrote it. (there are other dialects like Less and Sass that do support this kind of syntax, if you really need it, but in your case the solution doesn't need any clever syntax)
.zebra_stripe tbody tr:nth-child(even) td, .zebra_stripe tbody tr.even td {
background:#e5ecf9;
}
This assumes you have a table with the class zebra_stripe:
<table class='zebra_stripe'>
....
</table>
Tables without the class won't be striped.
By the way, I've left both your selectors in there, but you shouldn't need them both. The nth-child() selector should do the trick on its own, without the tr.even alternative. The tr.even would be needed in browsers that don't support nth-child() (ie old versions of IE), but in that case, if you need to support them, you'd do it with the even class, and wouldn't need to use nth-child().
CSS(SCSS?) selector used to create zebra background for table
You need to add more rows to the table. Because even is each second row.
Also your css is invalid
table.striped tr:nth-child(even) { background: red;}
http://jsbin.com/wigitequxu/edit?html,css,output
How do you zebra striping a rowspan table?
I couldn't find a pure CSS solution... But I was able to get the same effect using JavaScript.
var tds = document.querySelectorAll("td, th");
var groups = [];
for(var i = 0; i < tds.length; i++){
if(tds[i].getAttribute('rowspan') != null){
var rspan = tds[i];
groups.push({
parent: rspan.parentNode,
height: rspan.getAttribute('rowspan')
});
}
}
var count = 0;
var rows = document.querySelectorAll('tr');
var dark = true;
debugger;
for(var i = 0; i < rows.length; i++){
var row = rows[i];
var index = groupIndex(row);
if(index != null && dark){
var group = groups[index];
var height = parseInt(group.height);
for(var j = i; j < i + height; j++){
rows[j].classList.add('dark');
}
i += height - 1;
dark = !dark;
continue;
}
if(dark){
rows[i].classList.add('dark');
}
dark = !dark;
}
function groupIndex(element){
for(var i = 0; i < groups.length; i++){
var group = groups[i].parent;
if(group == element){
return i;
}
}
return null;
}.dark{
background-color: lightgray;
}<table width="200" border="1" id="myTable">
<tr>
<th rowspan="2" scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>Zebra striping to just one table column
If you know the column index of the one you'd like to stripe, you can do it in CSS only, using :nth-of-type selectors like so:
tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }
(Where 3 is being used a placeholder for your target column index)
Another option would be to put a class on the header (or first td) of the column you want to stripe, and then use JS to stripe the other tds in the same column:
var col_to_stripe = $('th.stripe-this-one').index();
$('table.selectively-stripe').find('tr:odd')
.each(function() {
$(this).children('td')
.eq(col_to_stripe)
.css('background', 'pink');
});
The class is not necessary as obviously you can just put the column index you want as with the pure CSS approach, but it's better for clarity of code.
demo here: http://jsbin.com/axutal/2/edit
Pure CSS3 solution to stripe table with multiple tbody elements?
If you're using jQuery then use the :even selector, (edited: to handle visibility) like this:
$("table tr:visible:even").addClass("even");
And a class like this:
.even { background: #efefef; }
Again, that's if you're using jQuery already, if you're not go with a pure javascript solution (including any library for just this is overkill) like bobince posted. Either way I don't see a pure CSS solution here...it's definitely a valid case, but not something that comes up often enough to make it spec-worthy.
My 'zebra striped' table doesn't print the striping
Printer setup generally includes options for print background colors / images.
That's the best answer - so far (15 minutes?). And I'm going to flag it as the one I used. I added an alert to the page load, telling the user how to get the striping on their printout and now I'm off to the next issue...
Stange behavior :nth-of-type(odd) in table row
You have given the first parent class to a td and not tr. Remove the first parent class from the td and put it on the tr.
Check my code.
table tr.parent:nth-of-type(odd) td {
background-color: red;
}
.child {
display: none;
}<table>
<tr class="parent">
<td>1</td>
<td>parent</td>
</tr>
<tr class="child">
<td>2</td>
<td>none</td>
</tr>
<tr class="child">
<td>3</td>
<td>none</td>
</tr>
<tr class="parent">
<td>4</td>
<td>parent</td>
</tr>
<tr class="parent">
<td>5</td>
<td>parent</td>
</tr>
<tr class="parent">
<td>5</td>
<td>parent</td>
</tr>
</table>CSS div alternating colour
Don't use nth-child, use nth-of-type
div.container > div:nth-of-type(odd) {
background: #e0e0e0;
}
.container {
width: 600px;
margin: 0 auto;
}
.row {
line-height: 24pt;
border: solid 1px black;
}
div.container>div:nth-of-type(odd) {
background: #e0e0e0;
}
h3 {
line-height: 36pt;
font-weight: bold;
color: blue;
}<div class="container">
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
</div>Add striped styling to a list of items
There was a topic for this on the KO forums a while back here: https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion
The solution that I had was a custom binding. There were a couple variations on it, but it basically would look like:
ko.bindingHandlers.stripe = {
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()); //creates the dependency
var allBindings = allBindingsAccessor();
var even = allBindings.evenClass;
var odd = allBindings.oddClass;
//update odd rows
$(element).children(":nth-child(odd)").addClass(odd).removeClass(even);
//update even rows
$(element).children(":nth-child(even)").addClass(even).removeClass(odd);;
}
}
and be used like:
<ul data-bind="template: { name: 'itemsTmpl', foreach: items }, stripe: items, evenClass: 'light', oddClass: 'dark'"></ul>
Sample here with 3 variations of this binding:
http://jsfiddle.net/rniemeyer/HJ8zJ/
Related Topics
Ie11 Border Radius and Border Bug
Applying CSS File to Javafx Webview
Styling Checkboxes, Radio Buttons and Dropdowns
Text with Image Background in Svg or CSS
Absolute Position Affects Width
How to Display a List in Two Rows
Differencebetween P:Nth-Child(2) and P:Nth-Of-Type(2)
Adding a Small Picture on the Right Side of Textfield with CSS
Border-Image: Workaround for Ie
Attribute Selector Where Value Equals Either a or B
How to Override Z-Index Inheritance from Parent Element
@Import Styles Not Working in a Media Query
How to Make a Gradient Background in CSS
How to Color Specific Cells in a Data Frame/Table in R
Less CSS - Change Variable Value for Theme Colors Depending on Body Class