click handler with hidden index column

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 <td> 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:
<p id="ridersList" style="font-family:Verdana;font-size:20px;">No riders loaded</p>
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('<table class="display" id="riders"></table>');
    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......