是否可以通过行类和列选择器为 CSS 样式选择一组表格单元格

Question

我有一个包含报告模块的网络应用程序。报告模块允许用户选择他们想要查看的字段（按名称），并构建一个数据数组，一个小胡子样式的模板处理器将其转换为一个表格，每个字段有 1 列。

服务器上的代码生成数据，包括总计和其他“特殊”行。这些特殊行是通过向行添加一个 css 类来标识的。

我刚刚遇到了对新型“特殊”行的要求，它需要在特定字段下划线。我不希望只为这种类型的行使用特殊的javascript，所以我想知道是否有一种方法可以在样式表中识别一个单元格（给它下划线），只给一个附加到行的类，并且附加到列的 id（或其他标识符）。

我意识到我可以使用 nth-child 来做到这一点，但列是由用户选择的，所以列号不会固定。

只是给你一个想法，我做了一个例子（实际代码要复杂得多，并且使用了很多库函数）：

<table>
    <thead>
        <tr>
            {{#each Columns}}<th id={{Id}}>{{Heading}}</th>{{/each}}
        </tr>
    </thead>
    <tbody>
    {{#each Rows}}
        <tr class="{{Class}}>
            {{#each Data}}<td>{{Value}}</td>{{/each}}
        </tr>
    {{/each}}
    </tbody>
</table>

典型数据（列的数量、内容和顺序因用户选择而异）：

{
    Columns: [
        { Id: "account", Heading: "Account" },
        { Id: "subAccountValueCP", Heading: "" },
        { Id: "valueCP", Heading: "Current Period" },
        { Id: "subAccountValueLP", Heading: "" },
        { Id: "valueLP", Heading: "Prior Period" }
        ],
    Rows: [
        { Class: "heading", Data: [ "Income", "", "", "", "" ] },
        { Class: "normal", Data: [ "Consultancy", "", 5000.00, "", 4500.00 ] },
        { Class: "parent", Data: [ "Other", "", "", "", "" ] },
        { Class: "sub", Data: [ "Postage", "50.00", "", "45.00", "" ] },
        { Class: "sub", Data: [ "Packing", "50.00", "", "45.00", "" ] },
        { Class: "total", Data: [ "Other", "", 100.00, "", 90.00 ] }
    ]
}

结果表：

<table>
    <thead>
        <tr>
            <th id="account">{{Heading}}</th>
            <th id="subAccountValueCP">{{Heading}}</th>
            <th id="valueCP">{{Heading}}</th>
            <th id="subAccountValueLP">{{Heading}}</th>
            <th id="calueLP">{{Heading}}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="heading">
            <td>Income</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="normal">
            <td>Consultancy</td>
            <td></td>
            <td>5000.00</td>
            <td></td>
            <td>4500.00</td>
        </tr>
        <tr class="parent">
            <td>Other</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="sub">
            <td>Postage</td>
            <td>50.00</td>
            <td></td>
            <td>45.00</td>
            <td></td>
        </tr>
        <tr class="sub">
            <td>Packing</td>
            <td>50.00</td>
            <td></td>
            <td>45.00</td>
            <td></td>
        </tr>
        <tr class="total">
            <td>Other</td>
            <td></td>
            <td>100.00</td>
            <td></td>
            <td>90.00</td>
        </tr>
    </tbody>
</table>

现在，我想用sub 类为行中的单元格设置样式，用padding-left: 20px; 样式为account 列设置样式。由于列的顺序和内容完全是用户定义的，我知道这样做的唯一方法是在每个单元格上放置一个类，然后在该类上进行选择。但是，我想知道是否有合适的 css 选择器可以选择属于特定列的单元格，而不是按列号，因为这样可以更有效地完成这个技巧。

Answer 1

看来这是不可能的。

唯一的解决方案是为相关列中的每个单元格添加一个类，然后选择tr.rowclass td.colclass。

Answer 2

通过在表格中添加colgroup，我们可以设置列的样式。

来自MDN：

HTML 元素（或 HTML 表格列组元素） 定义表中的一组列。

FIDDLE

.account,
.sub {
  background: orange;
}

<table>
  <colgroup class="account" />
  <colgroup span="4" />
  <thead>
    <tr>
      <th id="account">{{Heading}}</th>
      <th id="subAccountValueCP">{{Heading}}</th>
      <th id="valueCP">{{Heading}}</th>
      <th id="subAccountValueLP">{{Heading}}</th>
      <th id="calueLP">{{Heading}}</th>
    </tr>
  </thead>
  <tbody>
    <tr class="heading">
      <td>Income</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr class="normal">
      <td>Consultancy</td>
      <td></td>
      <td>5000.00</td>
      <td></td>
      <td>4500.00</td>
    </tr>
    <tr class="parent">
      <td>Other</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr class="sub">
      <td>Postage</td>
      <td>50.00</td>
      <td></td>
      <td>45.00</td>
      <td></td>
    </tr>
    <tr class="sub">
      <td>Packing</td>
      <td>50.00</td>
      <td></td>
      <td>45.00</td>
      <td></td>
    </tr>
    <tr class="total">
      <td>Other</td>
      <td></td>
      <td>100.00</td>
      <td></td>
      <td>90.00</td>
    </tr>
  </tbody>
</table>