Can I use <thead> inside <tbody> and <tfoot> apart from main <thead> of <table>?
I would like to style thead inside main components differently, but I don't understand, why higher specifity some of them does not react and some styles works on every <tr> while I specified it only to <tbody>.
I would like to try do it without classes.
Here is simple example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: black;
text-align: center;
color: black;
}
table > thead {background-color: pink;} /*0002 - to main thead*/
table > tbody > thead > tr > th {background-color: skyblue; } /*0005 - to "Final students marks" and "Avarage marks in groups"*/
tbody > tr:nth-child(even) {background: #CCC;} /*0011*/
tbody > tr:nth-child(odd) {background: #FFF;} /* why it styling tfoot?? */
tfoot tr:nth-child(even) {background: sandybrown !important; /*why not work???*/ }
tfoot tr:nth-child(odd) {background: sandybrown !important;}
</style>
</head>
<body>
<table>
<thead>
<tr><th>Number</th><th>Name</th><th>Surname</th><th>Group</th><th>Mark</th></tr>
</thead>
<tbody>
<thead><tr><th colspan="5">Final students marks</th></tr></thead>
<tr><td>1</td><td>Adam</td><td>Abacki</td><td>A</td><td>4</td></tr>
<tr><td>2</td><td>Ewa</td><td>Babacka</td><td>B</td><td>5</td></tr>
<tr><td>3</td><td>Edward</td><td>Cabacki</td><td>A</td><td>3</td></tr>
<tr><td>4</td><td>Tomasz</td><td>Dadacki</td><td>A</td><td>4</td></tr>
<tr><td>5</td><td>Anna</td><td>Kowalska</td><td>B</td><td>3</td></tr>
<tr><td>6</td><td>Marek</td><td>Zawadzki</td><td>A</td><td>5</td></tr>
</tbody>
<tfoot>
<thead><tr><th colspan="5">Average marks in groups</th></tr></thead>
<tr><td>1</td><td colspan="2"></td><td>A</td><td>4</td></tr>
<tr><td>2</td><td colspan="2"></td><td>B</td><td>4</td></tr>
</tfoot>
</table>
</body>
</html>
This is the final effect, which I would like to have:
<thead>
Permitted content: Zero or more <tr> elements.
Permitted parents: A <table> element.
So your table structure should be:
table
thead
tr
th
tbody
tr
td
tfoot
tr
td
body {
text-align: center;
}
table {
width: 100%;
border: 1px solid black;
border-spacing: 0;
}
table>thead {
background-color: pink;
font-weight: bold;
}
table>tbody>tr:first-child>td,
table>tfoot>tr:first-child>td {
font-weight: bold;
background-color: skyblue;
}
tbody>tr:nth-child(odd) {
background: #CCC;
}
tfoot>tr {
background: sandybrown;
}
tbody>tr>td:first-child,
tfoot>tr>td:first-child {
background: yellow;
}
<body>
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
<th>Group</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Final students marks</td>
</tr>
<tr>
<td>1</td>
<td>Adam</td>
<td>Abacki</td>
<td>A</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>Ewa</td>
<td>Babacka</td>
<td>B</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Edward</td>
<td>Cabacki</td>
<td>A</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>Tomasz</td>
<td>Dadacki</td>
<td>A</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Anna</td>
<td>Kowalska</td>
<td>B</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Marek</td>
<td>Zawadzki</td>
<td>A</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Average marks in groups</td>
</tr>
<tr>
<td>1</td>
<td colspan="2"></td>
<td>A</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td colspan="2"></td>
<td>B</td>
<td>4</td>
</tr>
</tfoot>
</table>
thead Isn't valid inside of tbody (yes they're just tags but tables are from a different time with different browser rules). You CAN use multiple tbody tags to group things and css:first-child to color rows correctly.
body {
background-color: black;
text-align: center;
color: black;
}
thead {
background-color: pink;
}
tbody > tr:nth-child(even) {
background: #CCC;
}
tbody > tr:nth-child(odd) {
background: #FFF;
}
/* remove important or other colors won't work */
/* just place AFTER other definition in CSS */
tbody:nth-child(3) tr {
background: sandybrown;
}
/* place this after other definition to make everything blue */
tbody>tr:first-child {
background: skyblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
<th>Group</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Final students marks</td>
</tr>
<tr>
<td>1</td>
<td>Adam</td>
<td>Abacki</td>
<td>A</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>Ewa</td>
<td>Babacka</td>
<td>B</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Edward</td>
<td>Cabacki</td>
<td>A</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>Tomasz</td>
<td>Dadacki</td>
<td>A</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Anna</td>
<td>Kowalska</td>
<td>B</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Marek</td>
<td>Zawadzki</td>
<td>A</td>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="5">Average marks in groups</td>
</tr>
<tr>
<td>1</td>
<td colspan="2"></td>
<td>A</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td colspan="2"></td>
<td>B</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
Remove thead inside tfoot, tbody and use only tr and th and add pink color background
Note : thead and tfoot elements can be used once in a table.
tbody > tr > th, tfoot > tr > th {background-color: skyblue !important; } /*0005 - to "Final students marks" and "Avarage marks in groups"*/
tbody > tr > td:first-child, tfoot > tr > td:first-child {
background-color: yellow
}
code sample for reference
body {
background-color: black;
text-align: center;
color: black;
}
table > thead {background-color: pink;} /*0002 - to main thead*/
tbody > tr:nth-child(even) {background: #CCC;} /*0011*/
tbody > tr:nth-child(odd) {background: #FFF;} /* why it styling tfoot?? */
tfoot tr:nth-child(even) {background: sandybrown !important; /*why not work???*/ }
tfoot tr:nth-child(odd) {background: sandybrown !important;}
tbody > tr > th, tfoot > tr > th {background-color: skyblue !important; } /*0005 - to "Final students marks" and "Avarage marks in groups"*/
tbody > tr > td:first-child, tfoot > tr > td:first-child {
background-color: yellow
}
<head>
<title>Page Title</title>
</head>
<body>
<table>
<thead>
<tr><th>Number</th><th>Name</th><th>Surname</th><th>Group</th><th>Mark</th></tr>
</thead>
<tbody>
<tr><th colspan="5">Final students marks</th></tr>
<tr><td>1</td><td>Adam</td><td>Abacki</td><td>A</td><td>4</td></tr>
<tr><td>2</td><td>Ewa</td><td>Babacka</td><td>B</td><td>5</td></tr>
<tr><td>3</td><td>Edward</td><td>Cabacki</td><td>A</td><td>3</td></tr>
<tr><td>4</td><td>Tomasz</td><td>Dadacki</td><td>A</td><td>4</td></tr>
<tr><td>5</td><td>Anna</td><td>Kowalska</td><td>B</td><td>3</td></tr>
<tr><td>6</td><td>Marek</td><td>Zawadzki</td><td>A</td><td>5</td></tr>
</tbody>
<tfoot>
<tr><th colspan="5">Average marks in groups</th></tr>
<tr><td>1</td><td colspan="2"></td><td>A</td><td>4</td></tr>
<tr><td>2</td><td colspan="2"></td><td>B</td><td>4</td></tr>
</tfoot>
</table>
</body>
codepn - https://codepen.io/nagasai/pen/jQwWPm
Related
Line 5 in the CSS removed all of the overlapping or thickened lines but through the middle, the line is still thick and at the start of the 2nd column as you can see in the picture but it isn't in the tutorial I'm watching. Why?
/* table styles */
table {
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
}
table th {
text-align: left;
background-color: darkseagreen;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
table th,
table td {
border: 1px solid black;
}
/* end table styles */
<table>
<thead>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oranges</td>
<td>5</td>
<td>$3.00</td>
</tr>
<tr>
<td>Celery</td>
<td>10</td>
<td>$5.00</td>
</tr>
<tr>
<td>Garlic</td>
<td>15</td>
<td>$13.00</td>
</tr>
<tr>
<td>Marbles</td>
<td>12</td>
<td>$23.00</td>
</tr>
<tr>
<td>VERY LONG ITEM THAT MAKES THE HEADER GO BRR</td>
<td>4</td>
<td>$40.00</td>
</tr>
</tbody>
</table>
This question already has answers here:
Why do browsers insert tbody element into table elements?
(2 answers)
Why do browsers still inject <tbody> in HTML5?
(6 answers)
Closed 2 years ago.
I created the following code. In this case, we thought that tr:nth-child(odd) works as follows
caption-> not tr
tr-> not odd
tr-> background red!
tr-> not odd
tr-> background red!
But this worked this way
caption-> not tr
tr-> no background red
tr-> no background red
tr-> background red!
tr-> no background red
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-child(odd) {
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
Why does nth-child not work as desired? I want to do this:
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-child(odd) {
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr style="background: red;">
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr style="background: transparent;">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr style="background: red;">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
I want to apply bg-color to row 1 and 3
Because the first tr is not an odd child...its the second child...and so on.
What you actually need is
tr:nth-of-type(even){
background: red;
}
to target the 2nd tr etc....
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-of-type(even){
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>First tr</th>
<th>First tr</th>
<th>First tr</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
Even if you write the tr element directly in thetable element, the HTML processing will interpret that there is a tbody element under thetable element and that there is a tr element in it. On the other hand, the caption element is placed just below thetable element.
Therefore, tr:nth-child(odd) doesn't count the caption element which is not a sibling of the tr element.
So why is the tbody element inserted even though the tr element is allowed directly under the table? For historical reasons, the tbody element wasn't omissible in the HTML4 era, and tr element didn't come directly under table element. This means that there is a tbody element without writing a tag.
11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data. The following summarizes which tags are required and which may be omitted:
The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
The start tags for THEAD and TFOOT are required when the table head and foot sections are present respectively, but the corresponding end tags may always be safely omitted.
Conforming user agent parsers must obey these rules for reasons of backward compatibility.
For this reason, it seems that even today, with the spread of HTML5, major browsers supplement the tbody element even without a tag.
You can use tr:nth-child(even) instead of tr:nth-child(odd).
table {
border-collapse: collapse;
color: #000000;
width: 80%;
}
td,
th {
border: 1px solid #000000;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
padding: 3px;
}
th {
background-color: #31A9EE;
}
tr:nth-child(even) {
background: red;
}
<table border="1">
<caption>caption</caption>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
change odd to even
or
change html to this
<table border="1">
<caption>caption</caption>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
How can I have different colors on each cell. What I did is only to make the whole red, just to the first 3 cells only yellow blue and red. How can it be this? I should refer to specific <td>? I see this question, but it wasn't exactly what I was searching.
body {
background: #000;
}
#wrap {
margin: 0 auto;
/* margin 0 auto will center that box in your document */
width: 780px;
/*size of your box*/
background: #000;
text-align: center;
/* everything will be written in that box will be centered horizontaly*/
}
td:hover {
background-color: #ff0000;
color: #000000;
}
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
Try using nth-child on the elements, here is a quick reference to all kinds of selections.
td:nth-child(odd) {
color: green;
}
td:nth-child(even) {
color: red;
}
td {
border: 1px solid gray;
}
<table>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$52.95/Month</td>
<td>$31.95/Month</td>
<td>$25.95/Month</td>
</tr>
</table>
You can use nth-child css psuedoselectors:
td:nth-child(1) {
color: yellow;
background-color: #AAA;
}
td:nth-child(2) {
color: red;
}
td:nth-child(3) {
color: blue;
}
<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>
First let's create a simplify version of your table.
table tr td{
border:2px solid black;
width:70px;height:30px;
text-align: center;
}
table{
border-collapse: collapse;
}
table:hover tr td:nth-child(1){
background: yellow;
}
table:hover tr td:nth-child(2){
background:blue;
}
table:hover tr td:nth-child(3){
background:red;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
</tr>
<tr>
<td>nine</td>
<td>ten</td>
<td>eleven</td>
<td>twelve</td>
</tr>
</table>
Let me give you a bit of an explanation.. the table:hover tr td:nth-child(1) part, first the table:hover part, when we hover to the whole table, we want to target all the tr, inside the table, then inside the tr, we want to only select the first td ":nth-child(1)" of every tr, so this will only select and change the background color of the one,five and nine td (which is the first column of the table) color to yellow if we hover the mouse to the whole body of the table.
PS: For me, I prepare to do this on JavaScript.
table
{
background-color: lime;
border-collapse: collapse;
}
tr
{
border-width: 0 0 1px 0;
border-style: solid;
}
tr:last-child
{
border: none; // so the last child from thead and tbody dont have border
}
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</tbody>
</table>
Now, I want a transparent border between the rows, but only the rows within tbody, but not between thead and tbody.
First, I tried
table {
border-collapse: collapse;
tr {
border-width: 0 0 1px 0;
border-style: solid;
}
tr:last-child {
border: none; // so the last child from thead and tbody dont have border
}
}
In the case, I get the border on the element I wanted, but it's black and not transparent.
Then I tried with border-spacing:
table {
border-spacing: 0 1px;
tr:last-child {
border: none;
border-spacing: none; //those two don't seem to work
}
}
Now I have transparent borders, but there are borders before and after the thead as well, which I can't eliminate.
So, I have now either:
1. border only in tbody but not between thead and first data row(good), but the borders are not transparent(bad)
or
2. transparent border(good), but unwanted border between thead and first data row(bad).
Is there a way to combine this so I have transparent border, but NOT between thead and first data row?
edit:
I want the border to be full transparent, but as soon as I set the border-color with rgba(0,0,0,0), the border "disappears". Ok, it doesn't really disappeares, but take the background-color from td(the lightgrey color, which is a rgba value as well) and I have no idea why.
use border-color: rgba(0,0,0,.5);
<!DOCTYPE html>
<html>
<head>
<style>
table
{
background:yellow;
border-spacing: 0;
}
tbody tr:not(:last-of-type) td
{
border-width: 0 0 5px 0;
border-style: solid;
border-color:black;
border-color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</body>
</html>
The problem is that your table has a background color. If you make the border fully transparent, it is transparent, but it won't show you what's behind the table. You're seeing the table's background-color. Also, since you're using a table, any reason you don't just use border-spacing instead?
But rgba(0,0,0,0) for the border color could work as well I suppose.
table
{
border-spacing: 0 20px;
}
tr
{
background-color: lime;
}
tr:last-child
{
border: none; // so the last child from thead and tbody dont have border
}
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</tbody>
</table>
Edit:
A way to achieve this is to use an :after on the tr of the thead, so you can "simulate" a border.
thead {
background: lime;
tr:after {
background: lime;
content: "";
height: 2px;
position: absolute;
left: 56px;
top: 77px;
width: calc(100% - 111px);
}
}
With this, you can place the "border" on top of the space between thead and the tbody. Obviously, this may not be the best solution, but I couldn't find another way.
Example: https://jsfiddle.net/qapmqfau/6/
Added an empty table row after each row
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-spacing: 0;
border-collapse:collaspe;
}
th
{
background:pink;
}
tr:nth-child(even)
{
background:transparent;
height:2px;
}
tr:nth-child(odd)
{
background:green;
}
</style>
</head>
<body>
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr></tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr></tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr></tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</body>
</html>
I wanted to change the width of the third td in the below table
#mytable table > tr > td:nth-child(3) {
width: 600px !important;
}
<table id="mytable">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Can you please help me out
Two errors:
Your selector: #mytable is already a table and has no table child,
so use only #mytable
The > in table > tr will not work since the browser adds tbody by default,
therefore tr is an immediate child of tbody
#mytable{
width:100%;
}
#mytable td:nth-child(3) {
width: 600px; background:#eee;
}
<table id="mytable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
#mytable table means that the CSS is trying to find an element with the ID of mytable and within that element looking for a <table>. You also do not need to be that specific; the following would achieve your goals:
#mytable tr td:nth-child(3) { width: 600px; }
This should be Visually more clear to you
Below is Snippet
.tblcommission{
border:1px solid black;
}
.tblcommission thead tr td:nth-child(2){
border:1px solid red;
background-color:red;
color:white;
}
.tblcommission tbody tr td:nth-child(2){
border:1px solid black;
background-color:blue;
color:white;
width:200px;
}
<table class="tblcommission">
<thead>
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
</tr>
</thead>
<tbody>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
<td>444444</td>
</tr>
</tbody>
</table>