click handler with hidden index column

quilkin

I have a table which contains a unique id column - this is used to create a click handler to move to a new page. I don't want the id column to be visible, however - this will be used in a mobile app and there isn't enough width.
The data is held in a javascript array.
The code below works but also shows the id column as full width, even though it is set to 1% width.
I have tried making the column hidden but then I cannot get the id from the handler element, column [0] returns the 'Name' content.

Another odd thing is that the column titles are all bunched up to the left, until I type a character in the search box when the titles re-arrange perfectly. This happen with or without autoWidth set.
I have searched the forum and found similar questions but not really found an answer.
The pages can be viewed at http://www.timetrials.org.uk : log in with username 'test' and password 'pw', then go to 'Riders & Clubs' and 'Rider List'.

html is:
No riders loaded
code:
[code]
dataArray = new Array(ridersdata.length);
for (i = 0; i < ridersdata.length; i++) {
var rider = ridersdata[i];
dataArray[i] = new Array(rider.ID, rider.Name, rider.Club, rider.Category, inEvent(rider));
}
$('#ridersList').html('');
var oTable = $('#riders').dataTable({
"sScrollY": size,
//"bjQueryUI": true,
"bPaginate": false,
"bScrollCollapse": true,
"aaData": dataArray,
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "1%" },
{ "sTitle": "Name" },
{ "sTitle": "Club" },
{ "sTitle": "Cat." },
{ "sTitle": "Event?" }
]

});

$('#riders tbody tr').on('click', function () {
var nTds = $('td', this);
var id = $(nTds[0]).text();
// create a new page based on id......
[/code]