Html 表调整th和td的行宽度

我有一个表，假设

和

的宽度相同，我在sass和css中做错了什么？第n个孩子（1）和第n个孩子（2）假设有20%和第n个孩子（3）60%，我做错了什么？多谢各位

sass代码：

 table {
      th,td:nth-child(1),
      th,td:nth-child(2) {
        width: 20%;
      }
      th,td:nth-child(3) {
        width: 60%;
      }

      tr {
        width: 100%;
        table-layout: fixed;
        display: inline-table;
      }
  }

表th，表td:n子项（1），
表th、表td:N子项（2）{
宽度：20%；
}
表th、表td:N子项（3）{
宽度：60%；
}

1.
2.
3.
1.
2.
3.

您的CSS逻辑中有一个小“Bug”。您的样式适用于

表中的每个
th
，并且仅适用于
td
元素的
n个子元素。因此，您的
th
标记的宽度为60%，因为这是最后一种样式，并且覆盖了以前的样式。为了解决这个问题，您也可以将
nth子元素
添加到
th
标记中，或者完全删除
th
，因为当其他地方没有特定的宽度时，它们会获得下面
td
元素的宽度。（希望我能描述一下，否则就问：-）


表格{宽度：100%；}
表td：第n个孩子（1），
表td：第n个孩子（2）{
宽度：20%；
}
表td：第n个孩子（3）{
宽度：60%；
}

1.
2.
3.
1.
2.
3.
您的CSS逻辑中有一个小“Bug”。您的样式适用于
表中的每个
th
，并且仅适用于
td
元素的
n个子元素。因此，您的
th
标记的宽度为60%，因为这是最后一种样式，并且覆盖了以前的样式。为了解决这个问题，您也可以将
nth子元素
添加到
th
标记中，或者完全删除
th
，因为当其他地方没有特定的宽度时，它们会获得下面
td
元素的宽度。（希望我能描述一下，否则就问：-）


表格{宽度：100%；}
表td：第n个孩子（1），
表td：第n个孩子（2）{
宽度：20%；
}
表td：第n个孩子（3）{
宽度：60%；
}

1.
2.
3.
1.
2.
3.
以下是简单的解决方案：

将表格宽度设置为100%

table {
  width: 100%;
  text-align: center;
}

th {
  width: 20%;
}

th:nth-child(3) {
  width: 60%;
}

就这些
这里是一个简单的解决方案：

将表格宽度设置为100%

table {
  width: 100%;
  text-align: center;
}

th {
  width: 20%;
}

th:nth-child(3) {
  width: 60%;
}

这就是所有的在
th
中增加的宽度，而不是
td


表th:n子项（1），
表th:N个孩子（2）{
宽度：20%；
}
表th：第n个孩子（3）{
宽度：60%；
}
桌子{
宽度：100%；
}
表th{
背景:#f5；
}
表td{
背景：#eaeaea；
}

1.
2.
3.
1.
2.
3.
在
th
中增加了宽度，而不是
td


表th:n子项（1），
表th:N个孩子（2）{
宽度：20%；
}
表th：第n个孩子（3）{
宽度：60%；
}
桌子{
宽度：100%；
}
表th{
背景:#f5；
}
表td{
背景：#eaeaea；
}

1.
2.
3.
1.
2.
3.
现在设置CSS的方法是只将：nth-child（）规则应用于
td
s。为了将其应用于
th
s，您需要向其添加相同的规则


表格{
宽度：100%；
}
表th:n个孩子（1），表td:n个孩子（1），
表th:N子项（2），表td:N子项（2）{
宽度：20%；
}
表th:n个孩子（3），表td:n个孩子（3）{
宽度：60%；
}
表th{
背景色：#F5；
}
表td{
背景色：#999；
}

1.
2.
3.
1.
2.
3.
现在设置CSS的方法是只将：nth-child（）规则应用于
td
s。为了将其应用于
th
s，您需要向其添加相同的规则


表格{
宽度：100%；
}
表th:n个孩子（1），表td:n个孩子（1），
表th:N子项（2），表td:N子项（2）{
宽度：20%；
}
表th:n个孩子（3），表td:n个孩子（3）{
宽度：60%；
}
表th{
背景色：#F5；
}
表td{
背景色：#999；
}

1.
2.
3.
1.
2.
3.
如果您在表格中设置宽度if
th
，则无需为
td
定义宽度，为什么要提到子项1和2，您只能提到第3个Inkyyah，您可以删除th或td样式，答案中提到了这一点（我试图让它更清楚）如果您在表格中设置宽度if
th
，则无需为
td
定义宽度，并且为什么要提及儿童1和2，您只能提及第三个Inkyyah，您可以删除th或td样式，在回答中提到（我试图使其更清楚），但这需要应用于th和td明白吗？@Raduken，否，没有必要对td应用宽度，在表中td始终相对于th，无论你给th什么宽度，下面的td都是一样的，但这需要对th和td应用宽度，明白吗？@Raduken，不，没有必要对td应用宽度，在表中td始终相对于th，无论你给th什么宽度，下面的td采用了与您在下面的链接中已经问过的标题相同的问题，这些问题是不同的。这可以在没有CSS的情况下通过设置TH的宽度来完成，只需更改文本即可alignment@GezzasaHTML5不推荐表的
width
属性，CSS方法是正确的here@MatthiasS. 非常感谢。我需要阅读更多。问题的标题与你在下面的链接中已经问过的完全相同，这些问题是不同的。这可以在没有CSS的情况下通过设置TH的宽度来完成，只需更改文本即可alignment@GezzasaHTML5不推荐表的
width
属性，CSS方法是正确的here@MatthiasS. 非常感谢。我需要多读点书。