Question

我有以下带有斑马条纹的twitter bootstrap表：

<table class="table table-striped">  
        <thead>  
          <tr>  
            <th>Advantage</th>  
            <th>Details</th>   
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>aaaaa</td>  
            <td> bbbbb </td>   
          </tr>  
        <tr>
    <td>    ccccc</td><td> ddddd</td>
</tr>    

        </tbody>  
      </table>

问题是我看不到斑马条纹了！这对我来说都是单调的。如何改善斑马条纹的对比度？

提前致谢，

比尔

Answer 1

相应的CSS是：

.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
}

在样式表中添加一个新规则，将此背景颜色覆盖为更清晰的东西。

Answer 2

如果您正在构建Bootstrap的.less文件，请查看variables.css，特别是此行（来自github）：

@tableBackgroundAccent:             #f9f9f9; // for striping

您也可以使用customizer。

对于较深的灰色，这个十六进制值可以起作用：#DBDBDB（它是一个略深的灰色，具有相同的红绿蓝混合）

如何改善bootstrap斑马条纹表的对比度

2 个答案: