为什么我可以更改桌子的边框颜色和厚度？ <thead> ，但不是背景色？
[英]Why am I able to change the border color and thickness of my table' <thead> , but not the background color?
问题描述
我可以更改表格顶部栏的边框样式，但是无论如何我都无法更改背景颜色。 谁能告诉我我要去哪里错了？ 我的代码如下：
<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;
}
5 个解决方案
解决方案1
2 2015-06-15 09:43:10
您的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>
解决方案2
2 2015-06-15 09:45:59
它为我工作！ 小心标记... <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
您的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代码中有错误-在<th>strong>Colour</strong></th>行的<th>strong>Colour</strong></th> <strong>标记中缺少起始括号。
查看工作中的小提琴 。
解决方案4
0 2015-06-15 09:48:12
尝试这样： 演示
除了给tr设置边框，您还可以给td和th
table thead td, table thead tr th { /* added th after tr */
background-color: pink;
border: 4px solid pink;
}
并尝试正确打开和关闭标签以获得预期的输出:)
解决方案5
0 2015-06-15 09:48:41
无需添加太多样式。 应用这个。
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>
Streamlit Multiple Page App侧边栏文本无法更改背景颜色、粗细和position的问题
[英]The problem of not being able to change the background color, thickness and position of the texts in the Streamlit Multiple Page App's Side Bar
当计时器分钟达到某个目标时，我如何更改页面的背景颜色？
[英]How am i able to change the background color of the page when the timer minutes hits at a certain target?
<thead>的垂直边框与<table>边框的其他颜色不同 - 渗入下面的水平边框 - Firefox colspan问题
[英]Vertical border of <thead> in different color than rest of <table> border - bleeds into horizontal border below - Firefox colspan issue
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.