Question

我正在使用JQuery Datatables版本1.10.7（两者，js和css都是从我的页面引用的），并且想要将样式应用于（我希望将字体权重设置为正常）。

但是，当我为样式编写一个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>

Answer 1

您的css中没有th的规则。

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

在thead上设置font-family时，您的样式会被默认的数据格式th样式所覆盖。

http://jsfiddle.net/6o3whw63/

Answer 2

这是因为当您为th添加css样式时，jquery.dataTables.css上该元素集上的样式覆盖了您的样式。

要优先考虑您的风格，请改为：

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

Answer 3

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

样式未应用于jquery数据表中

3 个答案: