Loading tray: separator strip

Question

I am using Bootstrap css lib. I know how to make a striped table with this lib, but how to make a striped div?

For ex:

<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> 

Question: how to do: <div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div> striped?

Answer 1

Twitter Bootstrap font works only for table rows. Therefore, to break your divs, you need to add each of them to a new line. For instance:

  <tr> <td> <div>text 1</div> </td> </tr> <tr> <td> <div>text 2</div> </td> </tr> ... 

Also, I'm not sure what you are trying to achieve with colspan="3" . If you want to create the correct table, you need to create a new td for each column. For instance:

  <tr> <td>2013-07-22</td> <td>Text for info field 1</td> <td>9.99</td> </tr> 

Answer 2

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> 

Answer 3

Add the class legend to your container, and then for every other line actually located in the div on that line, you can apply the 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>