正文 

当前位置： 首页 > 知识 >

使用 CSS 从表格的第二行替换行颜色

     2023-03-06     110

关键词：

【中文标题】使用 CSS 从表格的第二行替换行颜色【英文标题】：Alternate row colours from 2nd row of the table using CSS 【发布时间】：2020-11-12 19:07:35 【问题描述】：

我有一张如下表。我需要从第二行开始应用替代颜色。当我使用 nth-child 选择器来区分奇数行和偶数行时，正在考虑不满足要求的第一行。

那么，我们如何编写一个忽略第一行并从第二行开始应用颜色的选择器，将第二行视为奇数行？

我知道我们可以将奇数行的颜色应用于偶数行，反之亦然，但是当我们查看代码时有些令人困惑的地方。所以，我正在寻找下面这个表结构的替代解决方案。我感谢您的帮助。谢谢。

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

【参考方案1】：

您可以使用:nth-child() selector。另外，如果您使用&lt;th&gt; 元素，您可以将它们放在&lt;thead&gt; 中。

tbody tr:nth-child(2n) 
  background: peachpuff;

<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
    </tr>
    <tr>
      <td>51</td>
      <td>52</td>
    </tr>
    <tr>
      <td>61</td>
      <td>62</td>
    </tr>
  </tbody>
</table>

如果您不想更改标记，可以从第 3 个索引开始。

tr:nth-child(2n+3) 
  background: moccasin;

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>41</td>
      <td>42</td>
    </tr>
    <tr>
      <td>51</td>
      <td>52</td>
    </tr>
    <tr>
      <td>61</td>
      <td>62</td>
    </tr>
  </tbody>
</table>

【讨论】：

这与 2n 选择器相同，没有特定于我的场景。【参考方案2】：

您可以使用nth-child() css 选择器来选择奇数和偶数。然后通过nth-child(2) 选择器跳过第二行。

tr:nth-child(even) background: #CCC
tr:nth-child(odd) background: green
tr:nth-child(1) 
background:none;
<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

另一种实现方法是将&lt;thead&gt; 和&lt;tbody&gt; 分开。

tbody tr:nth-child(even) background: #CCC
tbody tr:nth-child(odd) background: green
<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

【讨论】：

在我的场景中，我们无法将颜色应用到第一行，因为我们不确定代码中的某些位置是否已经应用了颜色。 col1 和 col2 没有颜色。你想要同样的权利吗？你想跳过第二个值 11 和 12 吗？为了区分，您可以添加一些边框或不添加。 我希望第 2、第 4、第 6、... 被视为奇数行，第 3、第 5、第 7、... 被视为偶数行，因为我们忽略了第 1 行。 你的第一行是标题？或具有值 11 和 12 的行？没有清除 不管是不是标题还是表格行。在这种情况下，它是标题行。无论哪种方式，我们都必须过滤掉第一行并从第二行开始计数作为第一行。【参考方案3】：

这对你有用吗？分别定位第一行

tr:nth-child(even) background: #CCC
tr:nth-child(odd) background: #FFF
tr:first-child 
  background-color: yellow;

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

【讨论】：

在我的场景中，我们无法将颜色应用到第一行，因为我们不确定代码中的某些位置是否已经应用了颜色。【参考方案4】：

您可以将nth-child() 选择器与not() 选择器结合使用。

tr:nth-child(2n + 1):not(:nth-child(1)) 
    background: red;

【讨论】：

这不仅会为第一行应用颜色，还会为第三行、第五行等应用颜色。但是，在我的情况下，第 2、第 4、第 6 等等应该被视为奇数行。【参考方案5】： 
 table > tbody tr:nth-child(2n+1) > td
    background-color: #eee;

table > tbody > tr:first-child > td
    background-color: #006c00;
           
table > tbody > tr:nth-child(2n + 2) > td
    background-color: #d8e4bc;

【讨论】：

在我的场景中，我们无法将颜色应用到第一行，因为我们不确定代码中的某些位置是否已经应用了颜色。 不会有 :) 试试看codepen.io/Codrey/pen/ZEQwZjN?editors=1100 2n+1 在我们查看代码时基本上是奇数行，但它被应用于偶数行（如果计数从实际的第二行开始，则为第二行）。所以，我不想在代码和视觉之间产生这种混淆。

java示例代码_从edittext的第二行开始键入

java示例代码_从edittext的第二行开始键入 查看详情

UITextView : 文本从文本视图的第二行开始

】UITextView:文本从文本视图的第二行开始【英文标题】：UITextView:Textstartsfrom2ndlineoftextview【发布时间】：2011-11-0714:16:58【问题描述】：我有一个奇怪的问题。我有3个UITextFields和一个UITextView。我可以通过以下方式从一个UITextField移... 查看详情

javascript，为啥在播放视频时第二行无法从第一行替换？

】javascript，为啥在播放视频时第二行无法从第一行替换？【英文标题】：javascript,whythesecondtextlinecouldn\'treplacefromfirstlinewhilethevideoisplaying?javascript，为什么在播放视频时第二行无法从第一行替换？【发布时间】：2013-04-0321:01:49【... 查看详情

BI Publisher Report中如何将Ms.Word表格的第一行和第二行保持在一个页面中？

...发布时间】：2017-11-2407:38:36【问题描述】：我的机构正在使用BIPublisher（Ms.Word插件）和Peoplesoft。现在，我正在做一份报告，该报告将重复打 查看详情

如果 uilabel 只有一行，则使用 uiLabel 的第二行

】如果uilabel只有一行，则使用uiLabel的第二行【英文标题】：UsethesecondlineofuiLabelifuilabelonlyhaveoneline【发布时间】：2012-08-0811:28:51【问题描述】：在iOS项目中，我正在创建一个具有2行文本容量的UILabel，并且我指定UILabel可以包含2... 查看详情

如何阻止 flex 行的第二行出现在页面中间？ [复制]

...502:20:40【问题描述】：我的代码的#mainArticle部分包含一个使用行方向的弹性显示。这让我可以并排放置物品，这很棒。但是，当开始新行时，该行从页面中间的中间开始。有没有办法让# 查看详情

AngularJs 副本：不放在表格的第二行

...8-2216:17:56【问题描述】：我有一个很难解决的问题，当我使用angularJS单击按钮时，我不知道如何添加到第二行，它总是在第一行，对不起我的英语。这是我的模板<divclass="col-md-6"style="padding:0px"ng- 查看详情

怎样把excel表格的第一行和第二行锁定？让它们不动。

...术C以WPS2019版本为例：关于WPS表格设置的冻结窗格，您可使用WPS参考下述步骤完成操作：打开文件后，点击【视图-冻结窗格】官方电话官方服务官方网站 参考技术D要是在“数据”下没有“冻结窗口”，那就到“视图”菜单下找... 查看详情

text网格的第二行箭头(代码片段)

查看详情

awk - 使用另一个文件的第二行和第三行替换同一文件中的两个字符串的单个 f==2 文件号 [关闭]

】awk-使用另一个文件的第二行和第三行替换同一文件中的两个字符串的单个f==2文件号[关闭]【英文标题】：awk-Asinglef==2filenumbertoreplacetwostringsinthesamefileusingsecondandthirdlineofanotherfile[closed]【发布时间】：2021-12-2518:36:29【问题描述】... 查看详情

excel中怎么将一列中的第一行和最后一行互换,第二行和倒数第二行互换,依次类推

参考技术A插入一列，顺序填充1、2、3。。。序号，然后点这列进行扩展降序排列，然后把序号列删除，这样可否？ 参考技术B提供两种方法：1.假如数据在a1:a11,在b列依次输入a11,a10,下拉直到a1.然后查找字符a替换为=a,ok2.在b1输入=O... 查看详情

从表视图中删除特定行

...2010-08-0319:06:12【问题描述】：在我的应用程序中，我想从表格视图中删除特定行。表视图内容来自数据库，从数据库获取数据后，我推送到数组。然后我反转了一个数组，在我在表格视图中显示内容之后。我的问题是，当我试图... 查看详情

cssavada-更改第二行标题文本的文本颜色(代码片段)

查看详情

在表单的第二行制作更大的文本框

】在表单的第二行制作更大的文本框【英文标题】：makingabiggertextboxonasecondrowoftheform【发布时间】：2020-09-0115:52:04【问题描述】：我的表单上有两行文本框。第一行有三个文本框，下一行，我只想要一个宽度为100%的文本框。以下... 查看详情

第二行代码

...支持　　Android运行时库，提供一些核心库，允许开发者使用java语言编写Android应用　　　　Dalvik--运行时编译　　　　ART--安装时编译3.应用 查看详情

使用 Google Apps 脚本自动从电子表格中删除和插入数据

】使用GoogleApps脚本自动从电子表格中删除和插入数据【英文标题】：UsingGoogleAppsScriptstoautomatedeletingfromandinsertingdataintoaspreadsheet【发布时间】：2017-10-2421:03:40【问题描述】：我正忙于设置一个每天运行的GoogleApps脚本，以从google表... 查看详情

在wps中,第一行字数没满,怎么把第二行的合并上来,除了在第二行开头按backspace之外

... 2019版本为例：关于word中如何删除空行/回车符，您可使用WPS参考下方步骤完成操作：1、打开「文字（Word」；2、点击「开始-文字工具」使用相关删除功能可快捷的删除空段/断首空格/空格/换行符（参考下图）。官方电话官... 查看详情

如何通过 CSS 在有序列表中保持第二行的缩进？

...表项目符号或十进制数字都与高级文本块齐平。列表条目的第二行必须与第一行具有相同的缩进！例如：Loremipsumdolorsitamet,consectetueradipiscingeli 查看详情