无论我做什么，表格元素都不会响应编辑

Question

我想制作食物和营养的餐桌，但是有一个问题。无论我做什么，<td>和<th>元素的宽度都不会改变......我希望我的表格看起来像this（没有标题）而不是THIS

＆＃13;

＆＃13;

#table1{
  table-layout:fixed;
  width:100%;
}
.row1 > th{
  border-right:1px solid #ddd;
  padding:0.75em;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

你的html中没有.Table1类。只需使用.row1 > th

即可

要设置th的宽度，您可以使用：

th:nth-child(1) {
    width: 15%;
}

＆＃13;

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这就是你要找的东西吗？

＆＃13;

＆＃13;

#table1{
  table-layout:fixed;
  width:100%;
}
.row1 > th, .row2 > td{
  border-right:1px solid #ddd;
  padding:0.75em;
  text-align: left;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;