CyloTables V_0.2 Allow your users to resize table column widths to suit your data. HTML is quite restricting when it comes to tables and so displaying Excel type information can sometimes lead to ugly displays.

There are two types of drag styles you can use with your tables. The first is loose where all table columns can be resized independently from each other. The whole table will expand and contract with the columns. See below

The second stlye is fixed where the columns will eat into each other as each of the columns are dragged. See below

This next bit shows how you can get the current widths of the columns in a table.

Get widths of table below

Set widths using values

To get the current width's you call

widths=CyloTable.getColumnWidths('yourTableID');

This will return an array with INTEGER values. The array length will equal the number of columns. You can then save this array however you please.
To set the widths the columns of a table you call

CyloTable.setColumnWidths('yourTableID',widths);

You need to pass it the ID of the table and an array containing integers. The length array should equal the number of columns in the table.

To use CyloTables, include the following scripts in your page using ...

<script type="text/javascript" src='js/CyloTables.js'></script>
		<script type="text/javascript" src='js/eventutil.js'></script>
		<link href="css/cylo.css" rel="stylesheet" type="text/css"/>	
		

You need to set some attributes directly to your tables to make this work!

1. Add a width attribute, e.g

width=123 

2. Add a id attribute, e.g

id='mytable'

3. Add a style attribute which must contain the following

table-layout:fixed;

NOTE:This must be added directly into the style arribute, not a CSS class. e.g

<TABLE border="1px"  width=123  id='thatone' 
style="table-layout:fixed;border-collapse: collapse;">

Then when your ready to make the table resizable call the following method.

CyloTable.makeTableDragable('mytable','loose');

You can put this in the body onload event if you wish and as explained above there are two types of drag styles, loose and fixed
When using the fixed drag style, you should set the header widths in the <th> tags

---

FEATURES!

1. You can double click on the draggable parts and the column will resize the fit the content. It's not always accurate.

---

THINGS TO BE AWARE OF!

1. When double clicking to auto-resize the columns, it will shift the size of the overall table.

---

COMMENT ON THIS PLUG-IN

If you'd like to leave some feed back or would like to request a feature, please drop me a line on this Google group ...

http://groups.google.com/group/cylo-web-tools?hl=en