为什么我可以更改桌子的边框颜色和厚度？ <thead> ，但不是背景色？
[英]Why am I able to change the border color and thickness of my table' <thead> , but not the background color?
问题描述
I am able to change the border styling of the top bar in the table, but I can't it to change the background color no matter what I do. 
我可以更改表格顶部栏的边框样式，但是无论如何我都无法更改背景颜色。 Can anyone tell me where I am going wrong? 谁能告诉我我要去哪里错了？ My code is below: 我的代码如下：
<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: CSS：
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
5 个解决方案
解决方案1
2 2015-06-15 09:43:10
Your html code has some syntax erros: 您的html代码有一些语法错误：
Corrected here and working well: 在这里更正，并且运行良好：
<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 http://plnkr.co/edit/XnLr3Fw9MO7jwvJrfjgB?p=preview
解决方案2
2 2015-06-15 09:45:59
It's working for me! 它为我工作！ Take care with the tags... <strong> 小心标记... <strong>
table th, table td { border: 1px solid gray; } table thead td, table thead tr { background-color: pink; border: 4px solid pink; }
<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>
解决方案3
1 2015-06-15 09:46:12
Your CSS should include one more rule, for the <th> tag: 您的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;
}
Also, you have error in the HTML code - missing starting bracket in <strong> tag on line <th>strong>Colour</strong></th> . 另外，您在HTML代码中有错误-在<th>strong>Colour</strong></th>行的<th>strong>Colour</strong></th> <strong>标记中缺少起始括号。
解决方案4
0 2015-06-15 09:48:12
Instead of giving border for tr you can give for td and th 除了给tr设置边框，您还可以给td和th
table thead td, table thead tr th { /* added th after tr */
background-color: pink;
border: 4px solid pink;
}
And try to open and close tags properly to get expected output :) 并尝试正确打开和关闭标签以获得预期的输出:)
解决方案5
0 2015-06-15 09:48:41
No need to add so many styles. 无需添加太多样式。 Apply this. 应用这个。
table th, table thead tr td { border: 1px solid red; } table thead tr { background-color: red; border: 4px solid pink; }
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.