Question

我想为表格的第一行应用背景颜色。我给那一行一个特殊的班级名字。我还想为表格的其余部分应用另一种颜色。行颜色不会被应用。

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="new-style.css">
  <meta charset="UTF-8">
</head>

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head" class="head">
      <td class="head">Name</td>
      <td class="head">Type</td>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

</html>

Answer 1

您的问题在于特异性和顺序 - 因为您已将浅蓝色放在td上，您需要用td上的黄色覆盖它。

然后你需要将黄色声明移到初始声明下面，因为它具有相同的特异性 - 这意味着声明的顺序很重要。

最后一件事 - 从表中删除display:block，否则你将破坏表的布局。

＆＃13;

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  border: 1;
  width:100%;
  /* remove display block from here otherwise your table layout will break */
}


/*put this first*/
.table td {
  background-color: lightblue;
}


/*override with this*/
.head td {
  background-color: yellow;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" type="text/css" href="new-style.css">
  <meta charset="UTF-8">
</head>

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head" class="head">
      <td class="head">Name</td>
      <td class="head">Type</td>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

</html>

＆＃13;

More information on css specificity

Answer 2

对于Pete's answer，我想说如果你想创建一个表头来使用正确的标签<th>

<tr>
  <th class="head">Name</th>
  <th class="head">Type</th>
</tr>

<th>标记定义HTML表格中的标题单元格。

HTML表格有两种单元格：



标题单元格 - 包含标题信息（使用元素创建）



标准单元格 - 包含数据（使用元素创建）默认情况下，元素中的文本为粗体并居中。

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

th {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="new-style.css">
  <meta charset="UTF-8">
</head>

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head" class="head">
      <th class="head">Name</th>
      <th class="head">Type</th>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

</html>

Answer 3

一种解决方案是增加.head

的CSS设置的specificity

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

.table .head {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}

<html>

<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>

<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>

<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>

<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>

顺便说一下，我刚注意到你使用table作为一个类，也许你应该使用另一个名字...更具体

Answer 4

删除head中的课程tr，然后添加!important。出于某种原因，即使我重新安排了css

，如果没有!important，颜色也不会改变

＆＃13;

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow !important;
}


/*I want the rest of the table rows this color*/

.table td {
  background-color: lightblue;
}

＆＃13;

<body id="body">
  <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">

    <tr id="head">
      <td class="head">Name</td>
      <td class="head">Type</td>
    </tr>

    <tr id="initial-row">
      <td width=200> text here</td>
      <td width=200> text here </td>
    </tr>

    <tr id="second-row">
      <td width=200> text here </td>
      <td width=200>text here </td>
    </tr>
  </table>
</body>

＆＃13;

Answer 5

<tr id="head" class="head">
    <th class="head">Name</td> <!-- change to th (table heading) -->
    <th class="head">Type</td>
</tr>

的CSS：

th{
    background-color: yellow;
}

Answer 6

正如@Pete所说，你的特异性不正确。另外，您可以改进HTML标记以使用<thead>，然后您的css可以简单地定位<th>中的<thead>元素。这对于可访问性更好，因为它明确地将“head”定义为表头。

查看<table>标记上的w3c文档，了解accessibilty @ https://www.w3.org/WAI/tutorials/tables/ 或者有关标记的一般信息，请查看惊人的Mozilla文档@ https://developer.mozilla.org/en/docs/Web/HTML/Element/table

这样的事情：

.table {
  font-family: sans-serif;
  width: auto;
  overflow: auto;
  display: block;
  border: 1;
}


/*I want the row with class head to be this color*/

thead th {
  background-color: yellow;
}


/*I want the rest of the table rows this color*/

tbody td {
  background-color: lightblue;
}

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="new-style.css">
    <meta charset="UTF-8">
  </head>

  <body id="body">
    <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
      <thead>
        <tr id="head">
          <th>Name</td>
          <th>Type</td>
        </tr>
      </thead>
      <tbody>
        <tr class="initial-row">
          <td>Text here</td>
          <td>Text here</td>
        </tr>
        <tr class="second-row">
          <td>Text here</td>
          <td>Text here</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Answer 7

/*I want the rest of the table rows this color*/

.table tr {
  background-color: lightblue;
}


/*I want the row with class head to be this color*/

.head {
  background-color: yellow;
}

我认为这应该是上面的代码。

CSS样式不会被应用

7 个答案: