Skip to content

Instantly share code, notes, and snippets.

@thegrandpoobah

thegrandpoobah/datatable_scrollbug.html

Created August 10, 2011 15:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thegrandpoobah/1137267 to your computer and use it in GitHub Desktop.
Save thegrandpoobah/1137267 to your computer and use it in GitHub Desktop.
Download ZIP
Scrollable table in position:absolute container is sized weird.
Raw
datatable_scrollbug.html
<html>
<head>
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#awesome').dataTable({
bPaginate: false
, bSort: false
, bAutoWidth: true
, aaSorting: []
, bInfo: false
, sDom: 't'
, sScrollY: 500
, asStripClasses: []
, bScrollCollapse: true
});
window.setInterval(function() {
$('#awesome').dataTable().fnDraw(true);
}, 1000);
});
</script>
<style type="text/css">
@import "media/css/demo_table.css";
</style>
</head>
<body>
<div style="position: absolute; top: 0; left: 0">
<table id="awesome">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">A</td>
<td>C</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>A</th>
<td>B</th>
<td>C</th>
</tr>
<tr>
<td>A</th>
<td>B</th>
<td>C</th>
</tr>
<tr>
<td>This row has</th>
<td>data in it</th>
<td>than the usual row you know</th>
</tr>
<tr>
<td>A</th>
<td>B</th>
<td>C</th>
</tr>
<tr>
<td>A</th>
<td>B</th>
<td>C</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment