Table elements doesn't respond to edit no matter what I do - html

Question

I want to make a table for foods and nutrition,but there is a problem.No matter what i do width of the<td> and <th> elements won't change...I want my table to look something like this (without the header) Instead of THIS
#table1{
table-layout:fixed;
width:100%;
}
.row1 > th{
border-right:1px solid #ddd;
padding:0.75em;
}
<table id="table1">
<thead>
<tr class="row1">
<th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th>
</tr>
</thead>
<tbody>
<tr class="row2">
<th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th>
</tr>
</tbody>
</table>
Thanks.

Answer 1

Ther's no .Table1 class in your html. Simply use .row1 > th
To set width of th you can use:
th:nth-child(1) {
width: 15%;
}
#table1{
table-layout:fixed;
width:100%;
}
.row1 > th{
border-right:1px solid #ddd;
padding:0.75em;
}
.row2 > th{
border-right:1px solid #ddd;
padding:0.75em;
}
th:nth-child(1) {
width: 10%;
}
th:nth-child(2) {
width: 35%;
}
th:nth-child(3) {
width: 15%;
}
th:nth-child(4) {
width: 15%;
}
th:nth-child(5) {
width: 20%;
}
<table id="table1">
<thead>
<tr class="row1">
<th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th>
</tr>
</thead>
<tbody>
<tr class="row2"><th>Foods</th><th>Carbohydrates</th><th>Proteins</th><th>Fats</th><th>Calories Total</th></tr>
</tbody>
</table>

Answer 2

Is that what you are looking for?
#table1{
table-layout:fixed;
width:100%;
}
.row1 > th, .row2 > td{
border-right:1px solid #ddd;
padding:0.75em;
text-align: left;
}
<table id="table1">
<thead>
<tr class="row1">
<th style="width:40%;">Foods</th>
<th style="width:20%;">Carbohydrates</th>
<th style="width:15%;">Proteins</th>
<th style="width:10%;">Fats</th>
<th style="width:15%;">Calories Total</th>
</tr>
</thead>
<tbody>
<tr class="row2">
<td>Foods</td>
<td>Carbohydrates</td>
<td>Proteins</td>
<td>Fats</td>
<td>Calories Total</td>
</tr>
</tbody>
</table>