php - 为 laravel 表应用备用行颜色 CSS
问题描述
如何在 laravel 表中应用备用行颜色 CSS。我想为表格行显示替代颜色。我在表格中保留了gridview cssclass。我想申请.gridview tr.even td
偶数行数,即2的倍数的行数。
我的 CSS 文件
.gridview {
font-family: "arial";
background-color: #FFFFFF;
width: 100%;
font-size: small;
}
.gridview th {
background: #0CA3D2;
padding: 5px;
font-size: small;
}
.gridview td {
background: #B6E1EE;
color: #333333;
font: small "arial";
padding: 4px;
}
.gridview tr.even td {
background: #FFFFFF;
}
表代码
<table id="showBooksIn" class="table table-bordered gridview">
<thead>
<tr>
<th>BOOK ID</th>
<th>BILLED DATE</th>
</tr>
</thead>
<tbody>
@foreach($ordered_books as $data)
<tr>
<td> {{$data['BookID']}} </td>
<td> {{$data['BilledDate']}} </td>
</tr>
@endforeach
</tbody>
</table>
解决方案
@RamRaider 有使用 css 的最佳建议。另一种方法是使用模运算符:
@foreach($ordered_books as $i => $data)
@php $class = $i ÷ 2 === 0 ? 'even' : 'odd'; @endphp
<tr class="{{ $class }}">
<td> {{$data['BookID']}} </td>
<td> {{$data['BilledDate']}} </td>
</tr>
@endforeach
推荐阅读
- maven - 在 Azure Devops 中发布测试结果任务
- spring-boot - HibernateSearch 更新架构,在 Kubernetes 集群上使用 Spring Boot 删除和重新创建索引
- c# - 如果当前项目正在等待,则线程绑定的工作队列用于使额外工作出列的任务
- reactjs - 如何将独特的道具发送给相似的父母?
- node.js - 在本机反应中更改视图形式
- python - 导入 Tensorflow 2 时出现 Python 错误。喀拉斯
- html - 您可能知道为什么当我插入“ a*6 ”而不是在另一个下添加一个时,它会在线添加它们?
- reactjs - 无法让 babel 在打字稿上使用插值来编译字符串文字类型
- kubernetes - GKE 配置连接器问题 - 发布 i/o 超时
- python - 如何使用 python 删除或聚类默认的 x 标签?