Управление строкой данных DataTables

Question

Возможно ли контролировать высоту линии для tr либо через параметр DataTables, либо через CSS? Я пробовал разные вещи, но ничего не меняет 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 в ближайших декандантах.

Scripting хотел бы так:

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

В файле CSS, вы можете попробовать (я никогда не делал этого, не может поставить свою руку в огонь):

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

Чтобы играть с целыми кадрами таблицы, вам нужно иметь дело с wrapper. Это то, что смешало меня с моим первым быстрым ответом.

---------------
Первый ответ Посмотрите на id генерируемой DataTable, чтобы обернуть таблицу.

IS изготовленный из id, который вы указали в своем HTML как идентификатор таблицы.
Как, если ваш стол был назван этим идентификатором 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; 
}