css 如何在uigrid中改变一列得颜色

html-css030

css 如何在uigrid中改变一列得颜色,第1张

首先更正一下：图片中改变的是一整行的颜色而非一整列。

html代码：

<table class="table table-bordered table-striped table-condensed flip-content">

<thead class="flip-content bordered-palegreen">

<tr>

<th>

ID

</th>

<th>

昵称

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

1

</td>

<td>

boy

</td>

</tr>

<tr>

<td>

2

</td>

<td>

girl

</td>

</tr>

.....

<tr>

<td>

200

</td>

<td>

dog

</td>

</tr>

</tbody>

</table>

css代码：

<style>

tbody tr:nth-child(3n + 1){background:#f7f7f7}

</style>

:nth-child(3n+1) 此表达式可自定义，n代表大于等于0的正整数，本例中代表的意思是：tbody中的第1、4、7、10....个tr改变背景色，3n+0就是第3，6，9....

css的grid布局和表格的区别如下：

grid是固定大小的，table大小可变

grid继承自面板元素，table继承自块元素

grid用于表单内，用于显示内容，table用于流式内容展示。