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 10:30PM, 2011/03/13.
Vadim
How to get it work in Chrome?
Chrome doesn't display the vertical scroll bar.
Vadim at 12: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 12: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 01:37AM, 2011/04/08.
James Chen
very will!
James Chen at 03: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 03:04AM, 2011/06/25.
robertm
Tiny typo in "How to use" section:
textaera --> textarea
robertm at 04:40AM, 2011/11/23.
smoce
support cookies ???

Help
smoce at 04: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 table

Thanks in advance
Zedarr at 07:28AM, 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 09:20AM, 2014/07/05.

Post your comment

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

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com