Styling the last column of fixed columns on a datatable

Question

I have an issue where I want to create a shadow next to set of fixed columns to indicate that there is something under it. The fixed columns have a class dtfc-fixed-left added by the FixedColumns library in DataTables. The amount of fixed columns in this case can range from 0-2 set by the datatables colvis functionality.

The structure of the table is this:

<table>
  <thead>
    <tr>
      <th class="dtfc-fixed-left">Column 1</th>
      <th class="dtfc-fixed-left">Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dtfc-fixed-left">test data 1</td>
      <td class="dtfc-fixed-left">test data 2</td>
      <td>test data 3</td>
    </tr>
    <tr>
        <td class="dtfc-fixed-left">test data 4</td>
        <td class="dtfc-fixed-left">test data 5</td>
        <td>test data 6</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 7</td>
      <td class="dtfc-fixed-left">test data 8</td>
      <td>test data 9</td>
    </tr>
  </tbody>
</table>

And the css selector and some test styling data I tried to use was:

td.dtfc-fixed-left:last-child {
   background: red !important;
}

But that didn't work, I'd like to avoid hardcoding the styling logic with JS but I will do it if this isn't possible.

I would like to find a selector which always finds the last occurance of the class dtfc-fixed-left within each <tr>

Can you please add expected output ? – Srushti Shah May 09 '23 at 09:50 — Srushti Shah, May 09 '23 at 09:50

score 0 · Answer 1 · answered May 09 '23 at 09:58

You can not apply last-child in the class. you can refer here

.dtfc-fixed-left:nth-last-child(2) {
   background: red !important;
}

<table>
  <thead>
    <tr>
      <th class="dtfc-fixed-left">Column 1</th>
      <th class="dtfc-fixed-left">Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dtfc-fixed-left">test data 1</td>
      <td class="dtfc-fixed-left">test data 2</td>
      <td>test data 3</td>
    </tr>
    <tr>
        <td class="dtfc-fixed-left">test data 4</td>
        <td class="dtfc-fixed-left">test data 5</td>
        <td>test data 6</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 7</td>
      <td class="dtfc-fixed-left">test data 8</td>
      <td>test data 9</td>
    </tr>
  </tbody>
</table>

Unfortunately this doesn't work when the column range of fixed columns can be from 0 to 2. But it seems the FixedColumns screws this up aswell by moving the fixed columns even if it's toggled hidden with colvis. — Interruption, May 09 '23 at 10:06

score 0 · Accepted Answer · answered May 09 '23 at 09:59

The thing that characterises that td is that is has no following sibling of the same class.

For most of the major browser :has is implemented:

  td.dtfc-fixed-left:not(:has(~.dtfc-fixed-left)) {
    background: red;
  }

[However, note that on Firefox a flag has to be set].

<style>
  td.dtfc-fixed-left:not(:has(~.dtfc-fixed-left)) {
    background: red;
  }
</style>
<table>
  <thead>
    <tr>
      <th class="dtfc-fixed-left">Column 1</th>
      <th class="dtfc-fixed-left">Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dtfc-fixed-left">test data 1</td>
      <td class="dtfc-fixed-left">test data 2</td>
      <td>test data 3</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 4</td>
      <td class="dtfc-fixed-left">test data 5</td>
      <td>test data 6</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 7</td>
      <td class="dtfc-fixed-left">test data 8</td>
      <td>test data 9</td>
    </tr>
  </tbody>
</table>

This seems to work for the current situation, thank you so much. Although this doesn't seem to work with colvis but I feel like that's a completely separate issue with the library itself since it seems to move the class to the next one if one is toggled off. — Interruption, May 09 '23 at 10:05

Styling the last column of fixed columns on a datatable

2 Answers2