Question

我有一张桌子，<th>和<td>假设宽度相同，我在sass和css中做错了什么？ nth-child(1)和nth-child(2)假设有20％和nth-child(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;
      }
  }

＆＃13;

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

＆＃13;

<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

你的CSS逻辑中有一点“Bug”。您的样式适用于th内的每个table，仅适用于nth-child元素的td。所以你的th标签的宽度为60％，因为这是最后一种样式并覆盖之前的样式。要解决此问题，您也可以将nth-child添加到th标签，或完全删除th，因为它们会获得下面td元素的宽度，其他地方没有具体的宽度。（希望我可以形容它，否则只要问:-)）

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

<table border="1">
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

要明确：定义th和td非常冗余，你也可以将样式应用到th标签，这也可以。

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

Answer 2

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

将表格宽度设置为100％

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

th {
  width: 20%;
}

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

多数人

Answer 3

现在设置CSS的方法是仅将：nth-child（）规则应用于td。要将其应用于th，您需要为其添加相同的规则。

＆＃13;

table{
  width: 100%;
}
table th:nth-child(1), table td:nth-child(1),
table th:nth-child(2), table td:nth-child(2) {
  width: 20%;
}
table th:nth-child(3), table td:nth-child(3) {
  width: 60%;
}

table th {
  background-color: #f5f5f5;
}

table td {
  background-color: #999;
 }

＆＃13;

<body>
  <table>
    <thead>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</body>

＆＃13;

Answer 4

在th而非td

中添加了宽度

＆＃13;

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

＆＃13;

<table>
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 5

 table th,td:nth-child(1),table th,td:nth-child(2) {
 width: 20%;
 text-align:center;}

 table th:nth-child(3),table td:nth-child(3) {
 width: 60%;
 text-align:center;}

 table {
    width: 100%; }

表调整th和td的行宽

5 个答案: