Bootstrap:条纹div表

Question

我正在使用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>条纹？

Answer 1

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

以下CSS3示例适用于现代浏览器

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

将类图例添加到容器中,然后对于该行中div中的每个其他行,您可以应用格式

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>

Answer 3

Twitter Bootstrap 的条带化仅适用于表行。因此，为了对您的 div 进行条带化，您需要将每个 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>