dataTable 标题短于表格宽度

Question

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

这是我正在使用的代码的 sn-p：

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>，那么您需要做的就是删除新表的打开和关闭标签