Bootstrap：条纹 div 表答案

【问题标题】：Bootstrap: Striped div tableBootstrap：条纹 div 表
【发布时间】：2022-01-27 20:27:29
【问题描述】：

我正在使用 Bootstrap css 库。我知道如何用这个库制作条纹表，但是如何制作条纹 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 重复“样式”：

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

谢谢！给我解决了！
这样简单高效。谢谢

【解决方案3】：

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>

【讨论】：

这个单元格中的问题我有从服务器获取的可滚动列表。
这是怎么回事？只要您最终得到正确的 HTML，您从哪里获取数据并不重要。
在我使用 div 时，以某种方式与现有布局相比效果更好。但是，如果无法使用 striped-div 做到这一点，我会将其更改为 striped-table.... thnx
另外需要注意的是，在<td>中嵌套表格是完全有效的HTML