DataTables行高控制

Question

是否可以通過DataTables設置或通過CSS控制tr的行高？我嘗試了各種各樣的東西，但似乎沒有改變line-height。

表CSS

.table tbody tr:hover td, .table tbody tr:hover th { 
    background: rgba(36, 198, 213, 0.3); 
    opacity: 0.5; 
    color: #000; 
} 

.table tbody { 
    font-size: 15px; 
} 

.dataTable tbody tr { 
    line-height: 20px !important; 
    height: 40px; 
} 

.dataTables_paginate a { 
    background: #ff0000; 
} 

.dataTables_wrapper { 
    position: relative; 
    clear: both; 
    zoom: 1; 
    /* Feeling sorry for IE */ 
} 

.dataTables_processing { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 250px; 
    height: 30px; 
    margin-left: -125px; 
    margin-top: -15px; 
    padding: 14px 0 2px 0; 
    border: 1px solid #ddd; 
    text-align: center; 
    color: #999; 
    font-size: 14px; 
    background-color: white; 
} 

.dataTables_length { 
    width: 40%; 
    float: left; 
} 

.dataTables_filter { 
    width: 50%; 
    float: right; 
    text-align: right; 
} 

.dataTables_info { 
    width: 60%; 
    float: left; 
} 

.dataTables_paginate { 
    float: right; 
    text-align: right; 
} 

$(document).ready(function(){ 
 
    $("#ignored_device_table").DataTable({ 
 
    order: [[ 0, "asc"]], 
 
    dom: 'Bfrtip', 
 
    buttons: ['copy','excel', 'pdf','csv','print'] 
 
    }); 
 
});

<!-- page content --> 
 
<div class="right_col" role="main"> 
 
    <div class=""> 
 
    <!-- host data table --> 
 
    <div class="row"> 
 

 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="x_panel"> 
 
      <div class="x_title"> 
 
      <h2>Ignored Devices 
 
       <small>By Date</small> 
 
      </h2> 
 
      <ul class="nav navbar-right panel_toolbox"> 
 
       <li> 
 
       <a class="collapse-link"> 
 
        <i class="fa fa-chevron-up"></i> 
 
       </a> 
 
       </li> 
 
       <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
 
        <i class="fa fa-wrench" role="menu"></i> 
 
       </a> 
 
       </li> 
 
       <li> 
 
       <a class="close-link"> 
 
        <i class="fa fa-close"></i> 
 
       </a> 
 
       </li> 
 
      </ul> 
 
      <div class="clearfix"></div> 
 
      </div> 
 

 
      <div class="x_content"> 
 
      <div class="table-responsive"> 
 
       <table id="ignored_device_table" class="table table-striped"> 
 
       <thead> 
 
        <tr> 
 
        <th>Date </th> 
 
        <th>Hostname </th> 
 
        <th>IP Address </th> 
 
        <th>Name </th> 
 
        <th>Reason </th> 
 
        <th>Expiration </th> 
 
        <th><span class="nobr">Action</span></th> 
 
        </tr> 
 
       </thead> 
 

 
       <tbody> 
 
        <tr> 
 
        <td>05/06/16</td> 
 
        <td>DB-01</td> 
 
        <td>192.168.1.100</td> 
 
        <td>Jimmy Smith</td> 
 
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id iaculis massa. Mauris libero augue, bibendum ut efficitur a, imperdiet vel nisl. Curabitur ut blandit velit. Nulla tincidunt leo convallis risus bibendum, pulvinar bibendum lectus maximus. Vivamus convallis mi vel mollis sollicitudin. </td> 
 
        <td>06/06/16</td> 
 
        <td><a href="#">Restore</a> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>05/02/16</td> 
 
        <td>DB-02</td> 
 
        <td>192.168.1.101</td> 
 
        <td>Jimmy Smith</td> 
 
        <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td> 
 
        <td>06/02/16</td> 
 
        <td><a href="#">Restore</a> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>04/06/16</td> 
 
        <td>WEB-01</td> 
 
        <td>192.168.1.102</td> 
 
        <td>Jimmy Smith</td> 
 
        <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td> 
 
        <td>05/06/16</td> 
 
        <td><a href="#">Restore</a> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>03/06/16</td> 
 
        <td>WEB-02</td> 
 
        <td>192.168.1.103</td> 
 
        <td>Jimmy Smith</td> 
 
        <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td> 
 
        <td>04/06/16</td> 
 
        <td><a href="#">Restore</a> 
 
        </td> 
 
        </tr> 
 
        <tr> 
 
        <td>02/22/16</td> 
 
        <td>Firewall</td> 
 
        <td>192.168.1.104</td> 
 
        <td>Jimmy Smith</td> 
 
        <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td> 
 
        <td>03/22/16</td> 
 
        <td><a href="#">Restore</a> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

EDITED
-------

尋找你在控制檯中給出的表id。
在附近的後代你會發現tr。

腳本想是這樣的：

$("#ignored_device_table").find("tr").css({"height":"20px"}); 

在你的CSS文件，你可以嘗試（我從來沒有這樣做，不能把我的手在火）：

#ignored_device_table tbody tr{ 
    height:20px !important; 
} 

播放與表格的整個框架尺寸相關，您必須處理wrapper。這是我的第一個快速答案。

---------------
先回答 查找由數據表生成包裹表id。

它IS由您在HTML中提供的id作爲表ID。
一樣，如果你的表是由這個ID cert命名爲：

生成的包裝將是：cert_wrapper。 您可以通過在控制檯中檢查來找到它。

然後你可以腳本在此基礎上...喜歡的東西：

$("#cert_wrapper tr").css({"height":"20px"}); 

您將能夠趕上一般tr，td，等。但不是特定的，因爲Datable不會生成像rowID或cellID之類的東西。

請務必在$(document).ready(function(){});中包含這些將來的腳本，因爲該表是在客戶端生成的。

;）

Answer 2

好了，經過一些修修補補，我不得不重寫引導造型：

.table.dataTable > tbody > tr > td { 
    line-height: 2rem !important; 
}