Question

如何在表格中实现条带数据行？

.dataTable tbody tr.odd{background-color:#000000}
.dataTable tbody tr.even{background-color:#ffffff}

那段代码对我不起作用。如果我使用物化，刀片就会毁了。

大师请帮忙。

块引用 @if（$猫！= NULL）审计程序完成工作 @else

@endif
@if($cat!=null)
    @foreach($dataArray as $val)
    <tr class="dataTable">
        <td class="complianceTD">{{$val[0]}}</td>
        <td class="complianceTD_2">{{$val[1]}}</td>
        <td class="complianceTD_3">{{$val[2]}}</td>
    </tr>
    @endforeach
@else
    @foreach($dataArray as $val)
    <tr>
        <td class="complianceTD2"><div class="textContent">{{$val[0]}}</div></td>
    </tr>
    @endforeach
@endif

Answer 1

一种方法可以是使用：nth-child（）。查看剪切的代码，您可以根据用作参数的公式，更多地了解如何为行着色。

.dataTable tbody tr:nth-child(1n) {
  background-color: #CCC;    
}

.dataTable tbody tr:nth-child(2n) {
  background-color: #777;    
}

<table class="dataTable">
  <thead>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    <th>header 4</th>
    <th>header 5</th>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
      <td>Row 1, Col 4</td>
      <td>Row 1, Col 5</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
      <td>Row 2, Col 4</td>
      <td>Row 2, Col 5</td>
    </tr>
    <tr>
      <td>Row 3, Col 1</td>
      <td>Row 3, Col 2</td>
      <td>Row 3, Col 3</td>
      <td>Row 3, Col 4</td>
      <td>Row 3, Col 5</td>
    </tr>
    <tr>
      <td>Row 4, Col 1</td>
      <td>Row 4, Col 2</td>
      <td>Row 4, Col 3</td>
      <td>Row 4, Col 4</td>
      <td>Row 4, Col 5</td>
    </tr>
    <tr>
      <td>Row 5, Col 1</td>
      <td>Row 5, Col 2</td>
      <td>Row 5, Col 3</td>
      <td>Row 5, Col 4</td>
      <td>Row 5, Col 5</td>
    </tr>
  </tbody>
</table>

Answer 2

你可以使用：

tbody tr:nth-child(odd) {
   background-color: green;
}

tbody tr:nth-child(even) {
   background-color: red;
}

https://jsfiddle.net/L5tbhkew/

Answer 3

如果你有：

<table>
    <tr>
         <td>Row 1 Col 1</td>
         <td>Row 1 Col 2</td>
         <td>Row 1 Col 3</td>
    </tr>
    <tr>
         <td>Row 2 Col 1</td>
         <td>Row 2 Col 2</td>
         <td>Row 2 Col 3</td>
    </tr>
    <tr>
         <td>Row 3 Col 1</td>
         <td>Row 3 Col 2</td>
         <td>Row 3 Col 3</td>
    </tr>
</table>

你可以使用：

 table tr:nth-child(odd) td{ background-color:#000000; }  
 table tr:nth-child(even) td{ background-color:#ffffff; }

Answer 4

您应该将td用于表格内容，但也取决于您构建表格的html

.dataTable tbody td.odd {background-color：＃000000} .dataTable tbody td.even {background-color：#ffffff}

使用或不使用bootstrap的条纹表

4 个答案: