CODEWITHSUNDEEP
jquerydatatables
wusauarus
wusauarus

Reputation: 315

Jquery Datatables Multiple Header Issue

When I set my datatables to have multiple header rows, the swidth parameters that have been set are ignored. Is there any way of telling datatables that the header should be the second row rather than the first? I searched SO and the datatables dot net docs and couldn't find anything.

In the picture, the first column (year) should be significantly wider than all the others. This works just fine when there is one header row, but when there are two header rows the width I specified (using swidth) is ignored.

Upvotes: 0

Views: 5884

Answers (2)

wusauarus
wusauarus

Reputation: 315

I finally got to the bottom of this. I've been using Foundation CSS (primarily for the grid) and discovered it was applying some problematic CSS rules to my TD elements. 

table tr td {
  padding: 0.5625em 0.625em;
}

I saw these rules numerous times in the element inspector but overlooked them because I didn't think they could possibly cause trouble. After a process of elimination, I discovered them to be the culprit.

Upvotes: 0

Bumptious Q Bangwhistle
Bumptious Q Bangwhistle

Reputation: 4759

This works for me on Safari, Firefox, and Chrome: http://jsfiddle.net/Zbn3j/ 

<table id=test>
    <thead>
        <tr><th colspan=4>Cars</th></tr>
        <tr><th>Year</th><th>Unit</th><th>Time</th><th>Status</th></tr>
    </thead>
    <tbody>
        <tr><td>r1,c1</td><td>r1,c2</td><td>r1,c3</td><td>r1,c4</td></tr>
        <tr><td>r2,c1</td><td>r2,c2</td><td>r2,c3</td><td>r2,c4</td></tr>
    </tbody>    
</table>

With this call to dataTable:

$('#test').dataTable(
    {
            "aoColumnDefs": [{ "sWidth": "200px", "aTargets": [ 0 ] }] 
    });

How does this differ from your code or experience?

Upvotes: 3

Related Questions