html - 不对 a 的后代应用换行

Question

我有一个默认的表 white-space : normal想申请white-space: nowrap对于链接到特定 th 的所有 td 元素，但不必将其应用于 <td>元素本身，而不是使用外部 css 文件。

在下面的示例中，我只希望 ID 为“my_code”的列具有 nowrap。

<tr>
 <th id="my_code">Code</th>
 <th id="my_name">Name</th>
</tr>
<tr>
 <td>1</td>
 <td>Your name</td>
</tr>
<tr>
 <td>2</td>
 <td>Other name</td>
</tr>

我试过这个:

#my_code {
    white-space: nowrap !important;
}

还有这个:

#my_code td {
    white-space: nowrap !important;
}

但不会工作。

Answer 1

您不能将 CSS 选择器定位到 td在 th 的同一列中与 class 或 id，因为它们没有直接关系。但在上面的示例中，您可以申请:

td:nth-child(1) {
  white-space: nowrap;
}

或者，使用选择器 td:first-of-type , 或 td:first-child ...

一般来说，另一种方式是使用<col>元素。

<table>
  <colgroup>
    <col class="class1">
    <col class="class2">
  </colgroup>
  <tr>
    ...

.class1 { /* your style */ }

这会将 CSS 应用到整个列。但是允许的样式非常有限，只有这些 background-color , border , width , 和 visibility据我所知，属性是允许的。

更新

使用 CSS 选择器第 4 级，您将能够使用伪表来做到这一点:

15.1. Column combinator (||)

The column combinator, which consists of two pipes (|| ) represents the relationship of a column element to a cell element belonging to the column it represents.

<table>
  <colgroup>
    <col class="class1">
    <col class="class2">
  </colgroup>
  <tr>
    ...

.class1 || td {
  /* your style */
}

在撰写本文时，还没有任何浏览器支持此选择器。