Style not getting applied to in jquery datatables

Question

I am using JQuery Datatables Version 1.10.7 (both, the js and the css are referenced from my page), and want to apply a style to the (I want to make the font weight to normal).

But, when I write a css block for styling, it is not getting applied to the th. Could someone help me to convert the header to a normal weighted font. See the Start Date column. When I have explicitly mentioned the style tag in the th, and specified the font to be normal, that is getting rendered correctly.

Any help is appreciated!

Code Snippet:

$(document).ready(function() {
    $('#example').dataTable();
} );

.mytableheader { background-color: #4B0082; border-bottom: 1px;
color: #fff; font-family: 'HelveticaNeue-Light', Helvetica, Arial; font-size: 16px; font-weight: normal; padding: 5px; text-align: left;}
.table { text-align: left; background: #fff; padding: 0px; margin: 0px;
font-family: 'HelveticaNeueW01-55Roma'; color: #000; border: 1px solid
#4B0082; border: 1px solid #ddd; border-bottom:px solid #ddd; border-spacing:
0px; font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
font-size: 14px; line-height: 1.3; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="example" class="stripe" cellspacing="0" width="100%">
        <thead class="mytableheader">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th style="font-weight:normal">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
          </tbody>
  </table>

score 2 · Answer 1 · answered Jun 05 '15 at 22:12

2

It's because when you add the css style for that th, the style on that element set on jquery.dataTables.css was overriding yours.

To make your style a priority, do this instead:

table.dataTable thead th {
  font-weight: !important;
}

answered Jun 05 '15 at 22:12

Robin Carlo Catacutan

13,249
11
52
85

@AshwinTumma Cool! Glad to help. – Robin Carlo Catacutan Jun 05 '15 at 22:16

Romain Braun · Answer 2 · 2015-06-05T22:15:03.610

1

There is no rule for th in your css.

table.dataTable .mytableheader th {
    font-weight: normal;
}

When setting up the font-family on the thead, your style is overrided by the default datatable th style.

http://jsfiddle.net/6o3whw63/

edited Jun 05 '15 at 22:15

answered Jun 05 '15 at 22:09

Romain Braun

3,624
4
23
46

score 0 · Answer 3 · answered Jun 05 '15 at 22:11

$(document).ready(function() {
    $('#example').dataTable();
} );

.mytableheader { background-color: #4B0082; border-bottom: 1px;
color: #fff; font-family: 'HelveticaNeue-Light', Helvetica, Arial; font-size: 16px; font-weight: normal; padding: 5px; text-align: left;}
.table { text-align: left; background: #fff; padding: 0px; margin: 0px;
font-family: 'HelveticaNeueW01-55Roma'; color: #000; border: 1px solid
#4B0082; border: 1px solid #ddd; border-bottom:px solid #ddd; border-spacing:
0px; font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
font-size: 14px; line-height: 1.3; }
.mytableheader th { font-weight:normal !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="example" class="stripe" cellspacing="0" width="100%">
        <thead class="mytableheader">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th style="font-weight:normal">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
          </tbody>
  </table>

$(document).ready(function() {
    $('#example').dataTable();
} );

.mytableheader { background-color: #4B0082; border-bottom: 1px;
color: #fff; font-family: 'HelveticaNeue-Light', Helvetica, Arial; font-size: 16px; font-weight: normal; padding: 5px; text-align: left;}
.table { text-align: left; background: #fff; padding: 0px; margin: 0px;
font-family: 'HelveticaNeueW01-55Roma'; color: #000; border: 1px solid
#4B0082; border: 1px solid #ddd; border-bottom:px solid #ddd; border-spacing:
0px; font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
font-size: 14px; line-height: 1.3; }
.mytableheader th { font-weight:normal !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="example" class="stripe" cellspacing="0" width="100%">
        <thead class="mytableheader">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th style="font-weight:normal">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
          </tbody>
  </table>

I needed the !important to get it working in my case. @RomainBraun, could you explain why it was not required here? — ATP, Jun 05 '15 at 22:17
@AshwinTumma Right now the style applied to your th is `table.dataTable thead th`. To override it you need to be more specific, or just as specific if your stylesheet is called after the dataTables stylesheet (which should be the case). So you should be able to just have `table.dataTable thead th { font-weight: normal; }` without having to add `!important`. You should avoir using `!important` 99% of the time. — Romain Braun, Jun 05 '15 at 22:21
Great! That was informative. But, @RomainBraun, any specific reason that it should not be used? I guess that if the !important is used, it will override all the rules for the th across the page, and that may be an issue in due course of time. — ATP, Jun 05 '15 at 22:26
@AshwinTumma Exactly, yes. It then becomes a property that cannot be overriden, it could become a problem if you have to maintain your css in the long run. More info here: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css — Romain Braun, Jun 05 '15 at 22:47
Styles got overriden by pther styles in datatables.css. May you can skip the !important by inserting your custem css file afte the datatables.css. If there is no !important in datatables.css you will get it overriden like it happens to your style code without the !important. (Untested) This can help you maintain your code later. — Sebastian Wächter, Jun 06 '15 at 04:17

Style not getting applied to in jquery datatables

3 Answers3