FixedColumns example - relative width fixed columns

Preamble

This example shows how the fixed column can be given a relative width (relative to the DataTables viewport). By giving sLeftWidth as 'relative' (the default is 'fixed') and using iLeftWidth to indicate what percentage of the viewport you wish the fixed column to take, FixedColumns will automatically scale the DataTables display. Resizing the window will cause the DataTable scrolling area to resize dynamically, including the fixed column. Note that sScrollXInner is used to force the width of the DataTable - you probably won't want or need this. Note also that the scaling in this demo contrasts with the fixed scaling example where the fixed column width fixed to an abslute pixel value.

Live example

Rendering engine
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
KHTML
KHTML
KHTML
Misc
Misc
Misc
Misc
Misc
Misc
Misc
Other browsers
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Tasman
Tasman
Tasman
Trident
Trident
Trident
Trident
Trident
Trident
Webkit
Webkit
Webkit
Webkit
Webkit
Webkit
Webkit
Rendering engine
BrowserPlatform(s)Engine versionCSS grade
Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Firefox
1.5
Win 98+ / OSX.2+ 1.8 A
Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Camino 1.0 OSX.2+ 1.8 A
Camino 1.5 OSX.3+ 1.8 A
Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Netscape Browser 8 Win 98SE+ 1.7 A
Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Epiphany 2.20 Gnome 1.8 A
Konqureror 3.1 KDE 3.1 3.1 C
Konqureror 3.3 KDE 3.3 3.3 A
Konqureror 3.5 KDE 3.5 3.5 A
NetFront 3.1 Embedded devices - C
NetFront 3.4 Embedded devices - A
Dillo 0.8 Embedded devices - X
Links Text only - X
Lynx Text only - X
IE Mobile Windows Mobile 6 - C
PSP browser PSP - C
All others - - U
Opera 7.0 Win 95+ / OSX.1+ - A
Opera 7.5 Win 95+ / OSX.2+ - A
Opera 8.0 Win 95+ / OSX.2+ - A
Opera 8.5 Win 95+ / OSX.2+ - A
Opera 9.0 Win 95+ / OSX.3+ - A
Opera 9.2 Win 88+ / OSX.3+ - A
Opera 9.5 Win 88+ / OSX.3+ - A
Opera for Wii Wii - A
Nokia N800 N800 - A
Nintendo DS browser Nintendo DS 8.5 C/A
Internet Explorer 4.5 Mac OS 8-9 - X
Internet Explorer 5.1 Mac OS 7.6-9 1 C
Internet Explorer 5.2 Mac OS 8-X 1 C
Internet Explorer 4.0 Win 95+ 4 X
Internet Explorer 5.0 Win 95+ 5 C
Internet Explorer 5.5 Win 95+ 5.5 A
Internet Explorer 6 Win 98+ 6 A
Internet Explorer 7 Win XP SP2+ 7 A
AOL browser (AOL desktop) Win XP 6 A
Safari 1.2 OSX.3 125.5 A
Safari 1.3 OSX.3 312.8 A
Safari 2.0 OSX.4+ 419.3 A
Safari 3.0 OSX.4+ 522.1 A
OmniWeb 5.5 OSX.4+ 420 A
iPod Touch / iPhone iPod 420.1 A
S60 S60 413 A
BrowserPlatform(s)Engine versionCSS grade
Showing 1 to 57 of 57 entries

Initialisation code

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"sScrollY": "300px",
		"sScrollX": "100%",
		"sScrollXInner": "1200px",
		"bScrollCollapse": true,
		"bPaginate": false
	} );
	new FixedColumns( oTable, {
		"sLeftWidth": 'relative',
		"iLeftWidth": 20
	} );
} );

Documentation

Basic examples

Advanced examples