'Bootstrap: Striped div table

I'm using Bootstrap css lib. I know how to make striped table with this lib but how to make striped div's?

For ex, in tables you would do this:

<table id="newtable" class="table table-bordered table-striped fixedtable">
    <thead>
        <th>Date</th>
        <th>Info</th>
        <th>Price</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">                
                <div>text 1</div> 
                <div>text 2</div>  
                <div>text 3</div>  
                <div>text 4</div>                                
            </td>
        </tr>
    </tbody>    
</table>

And I need to repeat that "styling" with divs like this:

<div class="row"><div class="col">Text 1 White BG</div></div>
<div class="row"><div class="col">Text 2 Grey BG</div></div>
<div class="row"><div class="col">Text 3 White BG</div></div>
<div class="row"><div class="col">Text 4 Grey BG</div></div>

Question is: How to make: <div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div> striped?

htmlcsstwitter-bootstrap


Solution 1:[1]

use td div:nth-of-type(odd|even)

The following CSS3 example works in modern browsers

<style>
td div:nth-of-type(odd) {
    background: #e0e0e0;
}
td div:nth-of-type(even) {
    background: #FFFFFF;
}
</style>
<table id="newtable" class="table table-bordered table-striped fixedtable">
    <thead>
        <th>Date</th>
        <th>Info</th>
        <th>Price</th>
    </thead>
    <tbody>
        <tr>
            <td colspan="3">                
                <div>text 1</div> 
                <div>text 2</div>  
                <div>text 3</div>  
                <div>text 4</div>                                
            </td>
        </tr>
    </tbody>    
</table>

Solution 2:[2]

Add class legend to your container and then for every other row actually in the divs within that row you can apply a format

CSS

.legend .row:nth-of-type(odd) div {
background-color:antiquewhite;
}
.legend .row:nth-of-type(even) div {
background: #FFFFFF;
}

<div class="container legend">
    <div class="row">
     <div class="col-sm-2">text</div>
     <div class="col-sm-2">more Text</div>
</div>
<div class="row">
     <div class="col-sm-2">text</div>
     <div class="col-sm-2">more Text</div>
 </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 shukshin.ivan
Solution 2 Rondakay

Related Questions