Download table widget

Demo

Use a strict or loose doctype

This table widget requires a valid doctype in order to work properly in IE. You can either choose the strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or a loose doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Choose the one that makes your page look best across different browsers. The doctype tag should be placed on the first line of your HTML file.

Put this into your <HEAD> section

Put this into your <BODY> section

Download images

There are two arrow used in this script to indicate sorted columns. Right click on them below and select "Save target as". Put them in a subfolder called "images".

How to use

You create the table by use of plain HTML as shown in the textaera code for <BODY>. What's important is that you:

  1. Have a parent div like this: <div class="widget_tableDiv">
  2. Use a <THEAD> tag as parent of your header row.
  3. Use <TD> and not <TH> as tags for your header content
  4. Use a <TBODY> as parent of your table data rows(<TR>).

Look in the example for further help.

The last thing you have to do is to call the javascript function initTableWidget() which "converts" the table. Example:
<script type="text/javascript">
initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
</script>

The arguments you send to this function are:

  1. 'myTable' = The ID of your table. example: <TABLE id="myTable" ...
  2. 500 = Width of table widget
  3. 250 = Height of table widget
  4. Array('S','N','S','N','S') = An array telling how the columns should be sorted. "S" = String, "N" = Numeric. Use false(without quotes) instead of "S" and "N" if you have columns that shouldn't be sorted at all.

Comments

yuzhewang
very will i want a one!
yuzhewang at 04:30AM, 2011/03/14.
Vadim
How to get it work in Chrome?Chrome doesn't display the vertical scroll bar.
Vadim at 06:04AM, 2011/03/18.
John
Is it possible to have an updated version of the script where the scrollbar works in FF 4.0?
John at 06:49AM, 2011/04/01.
Martin S
Hello this example is nice.i want to generate the table from ajax and i want to apply this fixed table header in the table which generate by the ajax
Martin S at 07:37AM, 2011/04/08.
James Chen
very will!
James Chen at 09:48AM, 2011/05/20.
pet
Thank you. It's a Very great work!
Love to use the script in my own pages.

This script makes my work easier.
pet at 09:04AM, 2011/06/25.
robertm
Tiny typo in "How to use" section: textaera --> textarea
robertm at 11:40AM, 2011/11/23.
smoce
support cookies ??? Help
smoce at 11:08PM, 2013/01/03.
Zedarr
Hello evrerybody,for FireFox:Will we have a solution for the problem of scrollbar ?(it's very annoying)Another problem, aesthetic this one : when we have, for example, only one line in the table, the line takes all the place in the tableThanks in advance
Zedarr at 01:28PM, 2013/06/11.
zaftar
Does not work with IE11 and problem of window size using chrome, does anyone have the javascript modifications to do ?
zaftar at 03:20PM, 2014/07/05.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Unable to save captcha-image.