DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Background Color of Selected Row

Background Color of Selected Row

ngungongungo Posts: 64Questions: 23Answers: 2
in Editor

Currently background-color of selected row is default to #acbad4. Although you can use css to set the color of selected row, you cannot do the same for background-color. Is it true? Is there any way to do it?

tbody tr.selected {
  color: white;
  background-color: #eeeeee;  /* Not working */
}

Thanks!

This question has accepted answers - jump to:

Answers

  • F12MagicF12Magic Posts: 109Questions: 0Answers: 28

    css overruling should work. Make sure your custom css file is loaded last.
    Try using this css:

    table.dataTable tbody tr.selected {
    color: white;
    background-color: #eeeeee;
}
  • ngungongungo Posts: 64Questions: 23Answers: 2

    Hi F12Magic,

    OK, I understand the loading order logic now. But how do I do it? Currently, I have the custom css rules in the <head> section of the HTML of the index file, AFTER loading other css files. Do I miss something?

            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10,b-1.1.0,b-html5-1.1.0,se-1.1.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
        <style>
            table.dataTable tbody tr.selected {
                color: white;
                background-color: #eeeeee;  /* Not working */
            }
        </style>

    But it is still over-ruled by datatable.min.css.
    alt text

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin

    Seems like a duplicate of your other thread. Please don't post duplicates.

    It is still overruled because the DataTables selector is more specific.

    Allan

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin
    Answer ✓

    See the [MDN documentation](https://developer.mozilla.org/en/docs/Web/CSS/Specificity on CSS Specificity).

    Allan

  • F12MagicF12Magic Posts: 109Questions: 0Answers: 28
    edited September 2016 Answer ✓

    Following @allan specificity's link. You'll have 2 options to overrule the style.

    Use your table ID if you now it:

    #tableID tbody tr.selected {
    color: white;
    background-color: #eeeeee;
}

    Or use the important exeption:

    table.dataTable tbody tr.selected {
    color: white !important;
    background-color: #eeeeee !important;
}
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.