Jquery Datatables Multiple Header Issue

Question

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.

Bumptious Q Bangwhistle · Accepted Answer · 2013-07-18 08:18:00Z

3

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?

answered Jul 18, 2013 at 8:18

Bumptious Q Bangwhistle

4,7692 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wusauarus Over a year ago

Thank you for your answer, +1 for helping me realize that the issue was being caused by an outside library.

wusauarus · Accepted Answer · 2013-08-22 23:51:18Z

0

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.

answered Aug 22, 2013 at 23:51

wusauarus

3254 silver badges12 bronze badges

Collectives™ on Stack Overflow

Jquery Datatables Multiple Header Issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related