Menu
I have a simple example of my problem. I am using Datatables 1.9. The column headers don't move when scrolling horizontally when the datatable is inside another html table. It works fine when it is not in the html table. My example was actually taken from their example on horizontal scrolling but I added the outer table. Any help would be appreciated. I have looked everywhere for the answer. Here is the code. Thanks
<head>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.dataTables.min.js"></script>
</head>
<form>
<table>
<tr>
<td>
<div id="demo">
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%"
} );
} );
</SCRIPT>
516
i had the same problem. I used this config
"scrollY": "650px",
"sScrollX": "100%",
"scrollCollapse": true,
use scrollCollapse to make sure if you have less data, the bottom or footer does not stay at specified height.
180
Try this http://jsfiddle.net/CHPqb/23/
I added a css code and instead of sScrollXInner I change it to scrollX : true
th, td {
white-space: nowrap;
}
div.dataTables_wrapper {
width: 80%;
margin: 0 auto;
}
$('#example').dataTable( {
"sScrollX": "100%",
"scrollX": true
} );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
