CODEWITHSUNDEEP
htmlcss
Bruse
Bruse

Reputation: 313

Table background color change every secon row

I'm trying to change color background of table, but it change only row divided by 2. how can i change the rest?

I'm attaching the code of the table and the relevat CSS.

CSS

.table-striped{
  background: #f8fcff !important;
  .label {
    width: 44px;
    height: 16px;
    padding-top: 3px;
}

]

Upvotes: 0

Views: 82

Answers (2)

Dropout
Dropout

Reputation: 13866

Most of the time zebra striping is achieved by assigning certain classes to elements when the page is prepared. For example if you have the following structure

<div id='table'>
    <div class='row odd'></div>
    <div class='row even'></div>
    <div class='row odd'></div>
    <div class='row even'></div>
</div>

you can simply create a CSS specifying certain rows attributes based on the .odd and .even selectors.

There's also an option to do this post process using JS/jQuery, however it's obviously not the best way to go.

Upvotes: 0

SaturnsEye
SaturnsEye

Reputation: 6499

You need to use nth child.

This will allow you to edit what rows you want to style

EXAMPLE

table tr:nth-child(odd)
{
background:red;
}

table tr:nth-child(even)
{
background:blue;
}

Upvotes: 2

Related Questions