Sexy Tables

	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	Selects work option 1 option 2 option 3 option 4	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.

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:

• Only works for basic, single row headers.
• Classes are being ignored when sexy header and column are generated.
• On very large tables the header and column have a hard time keeping up with dragging.
• I also plan on adding a setting for only locking the header.

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