Why am I able to change the border color and thickness of my table' <thead> , but not the background color?
Question
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:
table th, table td {
border: 1px solid gray;
}
table thead td, table thead tr {
background-color: pink;
border: 4px solid pink;
}
5 answers
solution1
2 2015-06-15 09:43:10
Your html code has some syntax erros:
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>
solution2
2 2015-06-15 09:45:59
It's working for me! Take care with the tags... <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>
solution3
1 2015-06-15 09:46:12
Your CSS should include one more rule, for the <th> tag:
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> .
Check out the working fiddle .
solution4
0 2015-06-15 09:48:12
Try like this: Demo
Instead of giving border for tr you can give for td and 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 :)
solution5
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change radio button outer border color and thickness
HTML Table THEAD Element Background color not rounding
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?
Why does adding a border change the behavior of the background color?
Not able to change the background color of the header
Change the table tr border color
Change color of table cell border
Vertical border of <thead> in different color than rest of <table> border - bleeds into horizontal border below - Firefox colspan issue
Why does this not change the color of the border
Related Tags