如何禁用DataTable选中/激活状态下表头thead的颜色变化

Let’s work through why your custom .selected class isn’t keeping the header background locked at #dddfe2 when the table is sorted or the header is active. Here are the most likely issues and straightforward fixes:

1. You’re Probably Using the Wrong Class Name (Most Common!) #

DataTables doesn’t add a .selected class to headers during sorting by default. Instead, it applies specific sort-related classes to the <th> element:

• sorting_asc when sorted in ascending order
• sorting_desc when sorted in descending order

To confirm this for your table:

• Right-click the header while it’s sorted and select "Inspect" (Chrome/Firefox)
• Check the class list on the <th> element—you’ll see these sort-specific classes listed there.

2. Update Your CSS to Target the Correct Classes #

Replace your existing .selected CSS rule with one that targets the actual classes DataTables uses. Here’s a working example:

/* Target both ascending and descending sorted header states */
#new-izbox table thead th.sorting_asc,
#new-izbox table thead th.sorting_desc {
    background: #dddfe2;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid #dddfe2;
    text-align: left;
    font-weight: normal;
    color: #555;
    padding: 10px;
    margin: 0px;
    cursor: pointer;
}

3. Fix CSS Priority Conflicts #

If the above still doesn’t take effect, DataTables’ built-in styles might be overriding your custom CSS. Boost your selector’s specificity to win the style battle:

• DataTables’ default selectors look like table.dataTable thead th.sorting_asc
• Add your unique container ID to make your selector more specific:

  #new-izbox table.dataTable thead th.sorting_asc,
  #new-izbox table.dataTable thead th.sorting_desc {
      background: #dddfe2;
      /* Keep all your other header properties here */
  }
  

Last Resort: Use !important (Sparingly!) #

If specificity adjustments don’t work, you can add !important to the background property. Note: This should only be used as a last ditch effort, as it can complicate future CSS maintenance:

background: #dddfe2 !important;

4. Verify the Fix #

After updating your CSS:

1. Refresh the page
2. Sort the table
3. Inspect the header element again—your custom styles should appear in the Styles panel without being struck through (that means they’re active!).

内容的提问来源于stack exchange，提问作者Calvin Ananda