Question

我可以更改表格顶部栏的边框样式，但无论我做什么，我都无法改变背景颜色。谁能告诉我哪里出错了？我的代码如下：

<table>
<thead>
            <tr >
        <th>strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
</tbody>

CSS：

table th, table td {
  border: 1px solid gray;
}

table thead  td, table thead tr {
  background-color: pink;
  border: 4px solid pink;
}

Answer 1

你的html代码有一些语法错误：

在此进行了更正并且运作良好：

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<table>
<thead>
            <tr >
        <th><strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
</tbody>
</table>

</html>

http://plnkr.co/edit/XnLr3Fw9MO7jwvJrfjgB?p=preview

Answer 2

它为我工作！注意标签...... <strong>

＆＃13;

table th, table td {
  border: 1px solid gray;
}

table thead  td, table thead tr {
  background-color: pink;
  border: 4px solid pink;
}

＆＃13;

<table>
<thead>
            <tr >
        <th><strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
    
</table>

＆＃13;

Answer 3

您的CSS应该为<th>标记添加一条规则：

table th, table td {
  border: 1px solid gray;
}

table thead  td, table thead tr, table thead  th {
  background-color: pink;
  border: 4px solid pink;
}

此外，HTML代码中存在错误 - 在<strong>行的<th>strong>Colour</strong></th>标记中缺少起始括号。

查看工作fiddle。

Answer 4

请尝试以下操作： Demo

不是为tr提供边框，而是可以为td和th提供

table thead  td, table thead tr th { /* added th after tr */
  background-color: pink;
  border: 4px solid pink;
}

并尝试正确打开和关闭标签以获得预期的输出：）

Answer 5

无需添加这么多款式。应用它。

＆＃13;

table th, table thead tr td {
  border: 1px solid red;
}

table thead tr {
  background-color: red;
  border: 4px solid pink;
}

＆＃13;

<table>
<thead>
            <tr >
        <th><strong>Colour</strong></th>
        <th><strong>Red</strong></th>
        <th><strong>Green</strong></th>
        <th><strong>White</strong></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="left">Length (m)</td>
        <td>1</td>
        <td>0.5</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td align="left">Weight (kg)</td>
        <td>4</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td align="left">Burn Time (sec)</td>
        <td>60</td>
        <td>22</td>
        <td>15</td>
    </tr>
    <tr>
        <td align="left">Light Output (cd)</td>
        <td>200 000</td>
        <td>100 000</td>
        <td>850 000</td>
    </tr>
    <tr>
      <td align="left">Visibility at sea level (km)</td>
      <td>20</td>
      <td>15</td>
      <td>26</td>
  </tr>
</tbody>

＆＃13;

为什么我能够改变桌子的边框颜色和厚度？，但不是背景颜色？

5 个答案:

为什么我能够改变桌子的边框颜色和厚度？ ，但不是背景颜色？

5 个答案:

为什么我能够改变桌子的边框颜色和厚度？，但不是背景颜色？