Changing DataTables CSS file

moustafa_nabil3

Hi all,
I am trying to add a special theme to the DataTable to match other tables in my website.
For example;
I need to add a border at the bottom of the table.

I added my table, something like this:

<table id="exampleTable mySpecialClass">
<thead>...</thead>
...
</table>

Now, come to the CSS, I thought that I will do something like this:

table.mySpecialClass {
    border-button: 10px solid #FFFFFF;
}

But this didn't work, because the CSS file of the DataTable overrides this.

The following snippet is from the file jquery.dataTables.css:

  table.dataTable.no-footer {
    border-bottom: 1px none #111111; }

This snippet overrides mySpecialClass.

But, I can force mySpecialClass to work by adding "!Important"

In this case, my CSS will be:

table.mySpecialClass {
    border-button: 10px solid "#FFFFFF" !Important;
}

This will work.

So, my Question is:
Which is better?
Using "!Important", or modifying jquery.dataTables.css itself?