4

我用了一张桌子。我应用了 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 呢？

4

5 回答 5

8

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

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

检查这个http://jsfiddle.net/cbK8J/

于 2013-01-04T09:30:38.610 回答
4

@JonathandeM. 的评论是正确的。在那里弹出<thead>和标签，并将行中的标签更改为标签（因为 HTML 说明了事物是什么，它们是标题）：<tbody><td><thead><th>

<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;
}
于 2013-01-04T09:28:20.313 回答
1

你可以这样做：

HTML：

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

CSS：

.whatever { color: #a9a9a9 }

<tr>会做行，<td>会做单元格。

于 2013-01-04T09:40:32.747 回答
0

您必须将 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;}

它会给你蓝色

于 2013-01-04T09:29:46.813 回答
0

或者你可以简单地只修改 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>
于 2018-11-15T10:12:25.717 回答