Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows:
$(document).ready(function() {
var table = $('#example').DataTable
({
iDisplayLength: 15,
"bLengthChange": false
});
$("#example").css("height", "650px");
$("#example tbody tr").css("height", "75px !important");
} );
The corresponding html code looks like this:
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>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>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
To view a working example, please refer to this JSFIDDLE link.
As visible, the table row does not adhere to the default height setting and is excessively large. Any suggestions on how to rectify this issue?