Multi row table header

Kakao

I'm trying to create a two rows table header in this page:

http://fueleconomy.carconsumption.com/

The header I would like to have is this:

http://i1198.photobucket.com/albums/aa451/KakaOriginal/album/table_head_zpsb82e871f.png

So I'm using this HTML:

[code]



Brand
Model
Engine Displac
Cylin­ders
Transmis­sion
Miles per Gallon


City
Highway
Comb



[/code]

And this javascript code:

[code]
$('#compareList').dataTable({
'bAutoWidth': true,
'bDeferRender': true,
'bPaginate': false,
'bFilter': false,
'aaSorting': [],
'aoColumnDefs': [
{ 'aTargets': [0], 'bVisible': false},
{ 'aTargets': [1], 'aDataSort': [1,3]},
{ 'aTargets': [2], 'bVisible': false},
{ 'aTargets': [3], 'aDataSort': [3,10], 'sClass': 'noWrap'},
{ 'aTargets': [4], 'bVisible': false},
{ 'aTargets': [5], 'sType': 'numeric', 'aDataSort': [5,10], 'sClass': 'numeric'},
{ 'aTargets': [6], 'sType': 'numeric', 'aDataSort': [6,10], 'sClass': 'numeric'},
{ 'aTargets': [7], 'aDataSort': [7,10]},
{ 'aTargets': [8], 'sType': 'numeric', 'aDataSort': [8,10,3], 'asSorting': ['desc','asc'], 'sClass': 'numeric'},
{ 'aTargets': [9], 'sType': 'numeric', 'aDataSort': [9,10,3], 'asSorting': ['desc','asc'], 'sClass': 'numeric'},
{ 'aTargets': [10], 'sType': 'numeric', 'aDataSort': [10,3], 'asSorting': ['desc','asc'], 'sClass': 'numeric'}
]
});
[/code]

And what I'm getting is:

http://i1198.photobucket.com/albums/aa451/KakaOriginal/album/Wrong_table_header_zpsbfec2218.png

What I am missing?

allan

Your table only has 8 columns, but there are 10 columns defined in your aoColumnDefs. You've also got 3 columns hidden, leaving 5, which is shown in your picture, so it looks about right to me :-). What were you expecting?

Allan

Kakao

Ok. Your comment opened my mind and I think now I'm starting to understand how it does work. Thanks.