如何在CSS中设置替代表行的颜色？

这是一个简短的表格css样式教程，用于改变行的颜色，具体内容如下

• 如何改变表格中替代行的颜色？
• 如何改变表格中第一行的颜色？
• 如何设置表格中最后一行的颜色

在Html表格中:

表是用<\table\> 标签表示的 行是用tr标签表示的 列是用td, 和th 表示的标题列

如何改变html表格中替代行的颜色和样式？

什么是html表格中的替代行颜色？替代行是用偶数和奇数表示的，如果我们有两行，一行代表一种颜色，另一行有不同颜色。

例如，1,3,5,7到n代表一组称为奇数行 2,4,6,8到n代表偶数行。

在CSS中，:nth-child选择器被用来表示偶数行和奇数行。

nth-child 选择器可以选择第n个子元素。

语法

:nth-child(number) {
  css declarations;
}

下面是一个事件的奇数规则 在这个例子中:

将一个表格行的背景颜色改为灰色，对于偶数行背景颜色改为白色，对于奇数行。

tr:nth-child(even){
    background-color:#f0f0f0;

}
tr:nth-child(odd){
    background-color:#ffff;

}

另一种方法是为偶数行和奇数行添加类选择器 我们已经为roweven 和rowodd css选择器添加了tr 标签。

你可以使用javascript或任何编程语言来生成这个类选择器。

<table style="width:100%">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr class="rowodd">
    <td>11</td>
    <td>John</td>
    <td>5000</td>
  </tr>
  <tr class="roweven">
    <td>2</td>
    <td>Andrew</td>
    <td>6000</td>
  </tr>
  <tr class="rowodd">
    <td>3</td>
    <td>Eric</td>
    <td>9000</td>
  </tr>
  <tr class="roweven">
    <td>4</td>
    <td>Mark</td>
    <td>10000</td>
  </tr>
  <tr class="rowodd">
    <td>5</td>
    <td>Jain</td>
    <td>4000</td>
  </tr>
</table>

和css样式

.rowodd{
    background-color:#ffff;
    }
.roweven{
    background-color:#f0f0f0;
    }

这是一种传统的、古老的方法。

你可以使用nth-child psuedo选择器，它支持所有最新的浏览器。

如何改变html表格中第一行的颜色

我们必须使用first-child 选择器来选择第一行的tr标签。

语法

:first-child{
    css styles
}

tr:first-child{
  background-color:#9999;

}

如何改变表格中最后一行的颜色

我们必须使用:last-child 选择器来选择表格的最后一行。

语法

:last-child{
    css styles
}

tr:last-child{
  background-color:#9999;

}

代码示例

这个例子是为导航栏创建自定义类的代码 HTML

<table style="width:100%">
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>11</td>
    <td>John</td>
    <td>5000</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Andrew</td>
    <td>6000</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Eric</td>
    <td>9000</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Mark</td>
    <td>10000</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Jain</td>
    <td>4000</td>
  </tr>
</table>

CSS

table{
      border-collapse: collapse;
    width: 100%;
}
th,
    tr {
      border: 1px solid #ccc;
    }
tr:first-child{
  background-color:#9999;

}
tr:last-child{
  background-color:#9999;

}
tr:nth-child(even){
    background-color:#f0f0f0;

}