Awesome tables with two fixed axis, sticky headers and draggable, flickable scrolling.
Drag the table around, it's sexy!
head 2 | head 3 | head 4 | head 5 | head 6 | head 7 | head 8 | head 9 | head 10 | head 11 | head 12 | head 13 | head 14 | head 15 | head 16 | head 17 | head 18 | head 19 | head 20 | head 21 | head 22 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
line 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 2 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 | |
line 3 | cell 2 | cell 3 | cell 4 | header and column adapts perfectly to larger cells |
cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 4 | cell 2 | Links work | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 5 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 | |
line 6 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 7 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 8 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 9 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 10 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 11 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 12 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 13 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
last line | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
Note: Avoid using 100% x 100%. You need space outside the table to allow touch scroll on the page.
head 2 | head 3 | head 4 | head 5 | head 6 | head 7 | head 8 | head 9 | head 10 | head 11 | head 12 | head 13 | head 14 | head 15 | head 16 | head 17 | head 18 | head 19 | head 20 | head 21 | head 22 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
line 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 2 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 | |
line 3 | cell 2 | cell 3 | cell 4 | header and column adapts perfectly to larger cells |
cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 4 | cell 2 | Links work | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 5 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 | |
line 6 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 7 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 8 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 9 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 10 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 11 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 12 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
line 13 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
last line | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 | cell 7 | cell 8 | cell 9 | cell 10 | cell 11 | cell 12 | cell 13 | cell 14 | cell 15 | cell 16 | cell 17 | cell 18 | cell 19 | cell 20 | cell 21 | cell 22 |
Add sexy js and css to your header:
<link rel="stylesheet" href="css/sexytables-1.0.css">
<script type="text/javascript" src="js/sexytables-1.0.min.js"></script>
Create your table. Make sure you use proper thead and tbody tags, and add the sexyTable class:
<table class="sexyTable">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Optionally, you can set a height limit with a simple data attribute with CSS friendly values:
<table class="sexyTable" data-sexyHeight="90%">
Then just launch sexyTables by calling the function on your own js file:
$(document).ready(function() {
sexyTables()
})
Sexy tables uses a modded version of jquery.kinetic with exclusions for form elements inside the tables.
Check out the original Dave's jquery.kinetic here: davetayls.me/jquery.kinetic