Стиль не применяется к <th> в jQuery datatables

Я использую JQuery Datatables Version 1.10.7 (оба значения js и css указаны на моей странице), и вы хотите применить стиль к (я хочу сделать вес шрифта в норме).Стиль не применяется к <th> в jQuery datatables

Но, когда я пишу блок CSS для стилизации, он не применяется к th. Может ли кто-нибудь помочь мне преобразовать заголовок в обычный взвешенный шрифт. См. Столбец «Дата начала». Когда я явно упомянул тег стиля в th и задал нормальный шрифт, который получается правильно обработанным.

Любая помощь приветствуется!

Код сниппета:

$(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>

источник

2015-06-05 Ashwin Tumma

Там нет правила для th в вашем CSS.

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

При настройке семейства шрифтов на thead, ваш стиль перекрытый по DataTable th стиля по умолчанию.

http://jsfiddle.net/6o3whw63/

источник

2015-06-05 22:09:47

$(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>

источник

2015-06-05 22:11:15

Нет необходимости здесь важно!. –

Мне нужно было! Важно, чтобы он работал в моем случае. @RomainBraun, не могли бы вы объяснить, почему здесь не требуется? –

@AshwinTumma В настоящий момент стиль, примененный к вашему th, является 'table.dataTable thead th'. Чтобы переопределить его, вам нужно быть более конкретным или точно так же точно, если ваша таблица стилей вызывается после таблицы стилей dataTables (что должно быть так). Таким образом, вы должны иметь просто «table.dataTable thead th {font-weight: normal; } 'без необходимости добавлять'! important'. Вы должны avoir использовать '! Important' в 99% случаев. –

Это потому, что при добавлении стиля CSS для этого th, стиль на этот элемент установлен на jquery.dataTables.css была временной отмены ваша ,

Для того, чтобы ваш стиль приоритет, не делают это вместо:

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

источник

2015-06-05 22:12:19

Удивительный! Меня устраивает. –

@AshwinTumma Прохладный! Рад помочь. –

Стиль не применяется к <th> в jQuery datatables

ответ

Смежные вопросы