Bootstrap：条纹div表(Bootstrap: Striped div table)

Bootstrap：条纹div表(Bootstrap: Striped div table)

我正在使用Bootstrap css lib。 我知道如何用这个lib制作条纹表，但如何制作条纹div？

例如：

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

问题是：如何制作： <div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div>条纹？

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:

<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 is: How to make: <div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div> striped?

最满意答案

Twitter Bootstrap的条带化仅适用于表行。 因此，为了对div进行条带化，您需要将它们中的每一个添加到新行中。 例如：

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

另外我不确定你用colspan="3"想要达到的目的。 如果要创建正确的表，则需要为每列创建新的td 。 例如：

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

Twitter Bootstrap's striping only works for table rows. So in order to stripe your divs you need to add each of them into a new row. 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 trying to achieve with colspan="3". If you want to create a proper table you need to create 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>