dataTable标头比表宽度短

Question

我一直在研究这个问题，似乎无法找到解决方案。在我的表格中，如果我添加一个特定的列，由于某种原因抛出表格的标题，使标题远小于表格宽度。这是一个截屏：

以下是我正在使用的代码片段：

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']],

似乎抛弃一切的列是“类名”。它确实包含更长的值。如果我从表中取出Class Name列，则一切都正确对齐。

对此有任何帮助将不胜感激！

Answer 1

你有重复的ID，我猜这是问题所在。

您正在将html插入#dataTables001（不确定现有元素是什么），并且在新的html中主表具有相同的ID。

如果现有元素是<table>，那么您需要做的就是删除新表打开和关闭标记