html - 如果没有 <thead>，则表格第一列的样式不同

这就是我想要实现的目标:



这是我试图设计的标记:

  <h2>Table with no header</h2>
  <table>
    <tbody>
      <tr>
        <td>First column - bold</td>
        <td>Second column</td>
      </tr>
      <tr>
        <td>First column - bold</td>
        <td>Second column</td>
      </tr>
    </tbody>
  </table>

  <h2>Table with a header</h2>
  <table>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First column - not bold</td>
        <td>Second column</td>
      </tr>
      <tr>
        <td>First column - not bold</td>
        <td>Second column</td>
      </tr>
    </tbody>
  </table>

关于如何实现预期结果的任何想法？

最佳答案

这样做，你使用直接子选择器 > ， first-child 和 :not()

table > *:first-child:not(thead) td:first-child {
  font-weight: bold;
}

样本

table > *:first-child:not(thead) td:first-child {
  font-weight: bold;
}

<h2>Table with no header</h2>
<table>
  <tbody>
    <tr>
      <td>First column - bold</td>
      <td>Second column</td>
    </tr>
    <tr>
      <td>First column - bold</td>
      <td>Second column</td>
    </tr>
  </tbody>
</table>

<h2>Table with a header</h2>
<table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First column - not bold</td>
      <td>Second column</td>
    </tr>
    <tr>
      <td>First column - not bold</td>
      <td>Second column</td>
    </tr>
  </tbody>
</table>

关于html - 如果没有 <thead>，则表格第一列的样式不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40349657/