Question

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

服务器上的代码生成数据，包括总数和其他＆＃34;特殊＆＃34;行。通过向行添加css类来标识这些特殊行。

我刚刚遇到了一种新型＆＃34;特殊＆＃34;的要求。行，需要在特定字段下划线。我宁愿不为这种类型的行设置特殊的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和行account的样式为padding-left: 20px;的行中的单元格。由于列的顺序和内容完全由用户定义，我知道这样做的唯一方法是在每个单元格上放置一个类，并在该类上进行选择。但是，我想知道是否有一个合适的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>

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

2 个答案:

FIDDLE