我只想为 html 表的第一行使用不同的颜色答案

【问题标题】：I want a different color only for first row of a html table我只想为 html 表的第一行使用不同的颜色
【发布时间】：2012-12-18 17:25:52
【问题描述】：

我用了一张桌子。我申请了 CSS ID table-4。

按照html代码：

<table border='0' width='100%' id='table-4'>
   <tr><td>Date</td><td>Headline</td></tr>
   <tr><td>29 DEC</td><td>Dead</td></tr>
   <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
</table>

这里是 style.css：

#table-4 { background-color: #F2F2F2;}

所以整个表格的背景颜色是#F2F2F2，但是我想要Date 和Headline 所在的第一行的颜色不同，那么我该如何修改我的CSS？

【问题讨论】：

头部使用thead，如果不能使用table tr:first-child tdselector
我找不到你，乔纳森。
w3schools.com/tags/tag_thead.asp
使用THEAD 标签是语义上最正确的方法。使用:first-child CSS 选择器也是一个很好的解决方案，尤其是在您无法修改 HTML 的情况下。如果可能，我建议添加THEAD 标签和样式。它是专门为标记您的列标题而创建的（基本上，在阅读您的 HTML 时，您的第一个 TR 包裹在 THEAD 标记中表示“此列是'日期'列”，“此列是'标题'列”等）。
@thirdender：“您的第一个 TR 包裹在 THEAD 标签中的意思是“此列是‘日期’列”、“此列是‘标题’等。” - 这不太对。 <thead> 标签表示“表格的这一部分是标题部分”。它并不是说其中的每个单元格都是一个列标题。（见w3.org/TR/2011/WD-html5-author-20110809/…）你需要<th> 单元格具有scope 属性。

标签： css html-table background-color

【解决方案1】：

或者你可以只修改Html文件，不改变css

    <table border='0' width='100%' id='table-4'>
    <tr><td bgcolor='red' >Date</td><td  bgcolor='red'>Headline</td></tr>
    <tr><td>29 DEC</td><td>Dead</td></tr>
    <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
   </table>

【讨论】：

【解决方案2】：

@JonathandeM.'s comment 是正确的。在其中弹出<thead> 和<tbody> 标记，并将<thead> 行中的<td> 标记更改为<th> 标记（因为HTML 说明事物是什么，它们是标题）：

<table border='0' width='100%' id='table-4'>
   <thead>
      <tr><th scope="col">Date</th><th scope="col">Headline</th></tr>
   </thead>
   <tbody>
      <tr><td>29 DEC</td><td>Dead</td></tr>
      <tr><td>30 DEC</td><td>Hit</td></tr>
      <tr><td>02 JAN</td><td>Leg</td></tr>
   </tbody>
</table>

那么使标题行具有不同背景颜色的CSS是：

#table-4 thead tr {
   background-color: green;
}

【讨论】：

【解决方案3】：

你可以这样做：

HTML：

<td class="whatever">Date</td><td class="whatever">Headline</td>

css:

.whatever { color: #a9a9a9 }

<tr> 将执行行，<td> 将执行单元格。

【讨论】：

【解决方案4】：

您可以为此使用 :first-child。像这样写：

#table-4 tr:first-child{
    background:red;
}

查看http://jsfiddle.net/cbK8J/

【讨论】：

它工作正常，谢谢。你能告诉我如何改变第一行的文字颜色吗？
简单地将您的样式属性添加到括号内。检查这个jsfiddle.net/cbK8J/1

【解决方案5】：

您必须将 id 添加到第一个 tr 标签：

   <table border='0' width='100%' id='table-4'>
   <tr id ="r1" ><td>Date</td><td>Headline</td></tr>
   <tr><td>29 DEC</td><td>Dead</td></tr>
   <tr><td>30 DEC</td><td>Hit</td></tr>
   <tr><td>02 JAN</td><td>Leg</td></tr>
   </table>

然后添加另一个 css 行：

#table-4 #r1 { background-color: blue;}

它会给你蓝色

【讨论】：

或者你可以使用:first-child选择器。
好的，你可以'#table-4 tr:first-child { background-color: blue;}'
它工作正常，谢谢。你能告诉我如何改变第一行的文字颜色吗？
只需添加color: white; 即：#table-4 tr:first-child { background-color: blue; color: white}