I have a web app containing a reporting module. The reporting module allows the user to select which fields they want to see (by name), and builds an array of data, which a mustache-style template processor turns into a table, with 1 column for each field.
The code behind, on the server, generates the data, including total and other "special" rows. These special rows are identified by adding a css class to the row.
I have just come across a requirement for a new type of "special" row, which requires underlining a particular field. I would prefer not to have special javascript just for this type of row, so I am wondering if there is a way to identify a cell (to underline it) in a stylesheet, given just a class attached to the row(s), and an id (or other identifier) attached to the column.
I realise I could do it using nth-child, but the columns are selected by the user, so the column number wouldn't be fixed.
Just to give you an idea, I have cooked up an example (the actual code is much more complicated, and uses a lot of library functions):
<table> <thead> <tr> {{#each Columns}}<th id={{Id}}>{{Heading}}</th>{{/each}} </tr> </thead> <tbody> {{#each Rows}} <traccount", 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 ] } ] } Resulting table:
<table> <thead> <tr> <th>{{Heading}}</th> <th>{{Heading}}</th> <th>{{Heading}}</th> <th>{{Heading}}</th> <th>{{Heading}}</th> </tr> </thead> <tbody> <tr> <td>Income</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Consultancy</td> <td></td> <td>5000.00</td> <td></td> <td>4500.00</td> </tr> <tr> <td>Other</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Postage</td> <td>50.00</td> <td></td> <td>45.00</td> <td></td> </tr> <tr> <td>Packing</td> <td>50.00</td> <td></td> <td>45.00</td> <td></td> </tr> <tr> <td>Other</td> <td></td> <td>100.00</td> <td></td> <td>90.00</td> </tr> </tbody> </table> Now, I want to style (e.g.) the cells in rows with class sub and column account with style padding-left: 20px;. As the order and content of columns is entirely user-defined, the only way I know of doing it is to place a class on every cell, and select on that class. However, I wondered if there was a suitable css selector which would select cells belonging to a particular column, other than by column number, as that would do the trick much more efficiently.
2 Answers
It appears it is not possible.
The only solution was to add a class to every cell in the relevant columns, and select on tr.rowclass td.colclass.
By adding a colgroup to the table, we can style columns.
From MDN:
The HTML Element (or HTML Table Column Group Element) defines a group of columns within a table.
FIDDLE
.account, .sub { background: orange; }<table> <colgroup /> <colgroup span="4" /> <thead> <tr> <th>{{Heading}}</th> <th>{{Heading}}</th> <th>{{Heading}}</th> <th>{{Heading}}</th> <th>{{Heading}}</th> </tr> </thead> <tbody> <tr> <td>Income</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Consultancy</td> <td></td> <td>5000.00</td> <td></td> <td>4500.00</td> </tr> <tr> <td>Other</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Postage</td> <td>50.00</td> <td></td> <td>45.00</td> <td></td> </tr> <tr> <td>Packing</td> <td>50.00</td> <td></td> <td>45.00</td> <td></td> </tr> <tr> <td>Other</td> <td></td> <td>100.00</td> <td></td> <td>90.00</td> </tr> </tbody> </table>
