Question

我希望某个特定 TH 以下的所有 TD 中的文本都为粗体

该表具有动态列数/位置，因此我不能使用nth-child（）

以下示例：

Push: Got push token from the app: {
    token: {
        apn: '45a24c27b9a1029da2c06f0ddbe99dbf6ec072988ffe260fa764d1f5eb2c4d47'
    },
    userId: 'eiBnnCawfhfpBxKFD',
    id: '2661F96CFB3B4A51866E0FD468759152',
    appName: 'com.resellcalendar',
    metadata: {}
}

<table> <thead> <th id="th_name">Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Apple</td> <td>$10</td> </tr> <tr> <td>Banana</td> <td>$10</td> </tr> </tbody> </table> s应该为粗体

是否可以仅使用CSS而不使用Javascript？

Answer 1

我认为用这种方式不可能用粗体字设置一列...

但是关于标题：

CSS：使用#id或.class将<td>定位到特定<th>下第n个孩子

使用<col>元素可以定位和设置特定列的样式，但是不幸的是，只有少数几个属性可用于样式设置（font-weight不是其中之一）

因此可以定位和设置特定列的样式，但只能采用非常有限的方式。

这是一个演示：

.name {
  font-weight: bold;
  background-color: orange;
}
.th_name {
  background-color: white;
}

<table>
  <colgroup>
    <col class="name">
    <col class="price">
  </colgroup>
  <thead>
    <th class="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>$20</td>
    </tr>
  </tbody>
</table>

来自CSS 2.1 spec：

...但是，单元格的某些方面会受到设置的影响   列上的属性。

以下属性适用于列和列组元素：

“边界”

只有在以下情况下，各种边框属性才适用于列   在表格元素上，“边界折叠”设置为“折叠”。在那里面   在这种情况下，将在列和列组上设置的边界输入到   冲突解决算法，可在每个位置选择边框样式   细胞边缘。

“背景”

background属性设置列中单元格的背景，   但前提是单元格和行均具有透明背景。看到   “表层和透明度。”

“宽度”

'width'属性给出了列的最小宽度。

“可见度”

如果列的“可见性”设置为“折叠”，则没有   呈现该列中的单元格，并跨入其他单元格   列被裁剪。另外，桌子的宽度减小了   按列将占用的宽度。请参阅“动态效果”   下面。其他“可见性”值无效。

Answer 2

您的th和td之间没有父子关系，并且不能仅使用CSS进行设置。您只需将类添加到所需的每个td中即可。

.bold{
  font-weight: bold;
}

<table>
  <thead>
    <th id="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td class="bold">Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td class="bold">Banana</td>
      <td>$10</td>
    </tr>
  </tbody>
</table>

或使用:first-child

td:first-child{
  font-weight: bold;
}

<table>
  <thead>
    <th id="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$10</td>
    </tr>
  </tbody>
</table>

CSS：使用#id或.class NOT nth-child将目标定位在特定目标以下

2 个答案: