Is there a way to adjust the line height for a tr
using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height
.
https://i.sstatic.net/GwFaD.png
Table 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>