數據表頭比表格寬度短

我一直在處理這個問題，似乎無法找到解決方案。在我的表中，如果我添加一個特定的列，出於某種原因拋出表頭的頭部使得頭部比表格寬度小得多。這裏是一個截屏：數據表頭比表格寬度短

Screen Capture of Issue

下面是我使用的代碼片段：

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

，似乎扔事事休列是「類名」。它包含更長的值。如果我從表格中取出類名稱列，則所有內容都正確對齊。

任何幫助，將不勝感激！

來源

2014-07-17 Jason

是否採取了「時代」還解決這個問題。對我來說，好像「時間」標題應該是一個更大的寬度，它會允許所有其他列如果它是一致的。 – urnotsam

我真的很想看到生成的HTML標記...？ – davidkonrad

你有重複的ID，我猜測是問題。

您正在將html插入到#dataTables001（不確定現有元素是什麼），並且在您的新html中，主表具有相同的ID。

如果現有的元素是<table>那麼所有你需要做的就是刪除新表打開和關閉標籤

來源

2014-07-17 18:39:21 charlietfl

+1，非常好的觀察。但是，我懷疑這是真正的問題。 – davidkonrad

是很好看。我做了改變，問題仍然存在 – Jason

@davidkonrad涉及許多因素，但...可能是簡單的CSS邊緣，表中的表等。插件肯定會在外部元素上調用，離開內部做出意想不到的事情 – charlietfl

數據表頭比表格寬度短

回答

相關問題