back to Helder Cervantes

Sexy Tables

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

Full page width example with 90% height

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

How to use it

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()
})
        

Known limitations which I plan to look into:

A special thanks to Dave Taylor:

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