dataTable header shorter than table width

Question

I've been working on this issue and can't seem to find a solution. Within my table if I add one particular column it for some reason throws of the header of the table making the header much smaller than the table width. Here is a screen capture:

Screen Capture of Issue

Here is a snippet of the code I am using:

function callDT() {
var url = "localhost/dataTable001.php";
$.getJSON(url,function(data){

    var dt = data.dt;
    var table = '<table id="dataTables001"><thead><tr><th>Time</th><th>Number of Cases</th><th>Passed</th><th>Failed</th><th>Class Name</th></tr></thead><tbody>';
    $.each(data.dt.time, function(i, time) {
            table +="<tr class='even gradeC'><td>"+ time + "</td>"+"<td class='priorityColor'>" + data.dt.total[i]  + "</td>"+"<td class='statusColor'>" + data.dt.pass[i] + "</td>"+"<td class='Color'>" + data.dt.fail[i] + "</td>"+"<td class='statusColor'>" + data.dt.class_name[i] + "</td>"+"</tr>";
    });
// after the loop, close your tbody and table tags
table += '</tbody></table>';
// then AFTER the loop, you set the data to the table.
$("#dataTables001").html( table )
$('#dataTables001').dataTable( {

             "paginate": false,
             "scrollY": "260px",
             "info": false,
             "orderFixed": [[0,'desc']],

The column that seems to throw everything off is "Class Name". It does contain values of longer lengths. If I take the Class Name column out of the table everything aligns correctly.

Any help on this will be appreciated!

Does taking out "Time" also fix this. To me it seems like "Time" header should be a greater width and it would allow all the other columns to align if it was. — urnotsam
– urnotsam, Commented Jul 17, 2014 at 18:08

charlietfl · Accepted Answer · 2014-07-17 18:39:21Z

1

You have duplicate ID's which I am guessing is the problem.

You are inserting the html into #dataTables001 ( not sure what that existing element is) and within your new html the main table has the same ID.

If the existing element is a <table> then all you need to do is remove the new table open and close tags

answered Jul 17, 2014 at 18:39

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

davidkonrad Over a year ago

+1, very good observation. However, I doubt this is the real problem.

Jason Over a year ago

Yes good looking out. I made the change and the problem still persists

charlietfl Over a year ago

@davidkonrad numerous factors involved though... might be simple css margin, table in a table etc. Plugin definitely will be called on outer element leaving inner doing unexpected things

charlietfl Over a year ago

@Jason is table properly contained in it's parent? Or is there overflow that could be causing issues? Any css width constraints set on th, td or table itself?

davidkonrad Over a year ago

@charlietfl, there has been numerous questions like this. It typically ends up in malformed HTML. But cant be sure, off course. But you pointed out an issue that certainly has to be fixed anyway!

Collectives™ on Stack Overflow

dataTable header shorter than table width

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related