Bootstrap Таблица не отображается правильно

Question

Я использую JavaScript для прокрутки некоторых данных и построения нескольких таблиц, и я использую Bootstrap с таблицей таблицы таблицы классов. Это отлично работает на всех столах, за исключением последней таблицы, которую нужно создать. Нижний стол всегда заключен в квадрат, и наведение не работает. Столбцы изменяются до нужного размера, но об этом.

Я не могу работать это, обе таблицы имеют класс, объявленный:

Независимо от того, сколько столов сделаны это всегда происходит на последней таблице. Я должен указать, что я пробовал все, о чем я могу думать, включая добавление фиктивной таблицы в цикле и последнее взаимодействие, но затем это делает две раздавленные таблицы.

Update: http://jsfiddle.net/si828/1ksyces5/8/

Код:

$('#tableContainer').empty(); 
    var div = document.getElementById('tableContainer'); 

    for (var i = 0; i < data.length; i++) 
    { 

     div.innerHTML = div.innerHTML; 

     var para = document.createElement("p"); 
     var logo = document.createElement("a"); 
     logo.setAttribute('class', 'glyphicon glyphicon-user'); 
     para.appendChild(logo); 
     var node = document.createTextNode(" " + data[i].userName + " (" + data[i].userID + ") "); 
     para.appendChild(node); 

     var aTag = document.createElement("a"); 
     aTag.setAttribute('data-id-proxy' , data[i].userID); 
     aTag.setAttribute('class' , 'open-AddUserModal'); 
     aTag.setAttribute('href' ,'#addUserModal'); 

     var span = document.createElement("span"); 
     span.setAttribute('class', 'glyphicon glyphicon-plus'); 
     aTag.appendChild(span); 

     para.appendChild(node); 
     para.appendChild(aTag); 
     para.setAttribute('class', 'text-primary'); 
     div.appendChild(para); 

     var table = document.createElement('table'), tr, td, row, cell; 
     table.setAttribute('class', 'table table-hover'); 
     table.setAttribute('id', 'table' + data[i].userID); 
     table.setAttribute('border', '1'); 

     var header = table.createTHead(); 
     var row = header.insertRow(0); 

     var cell = row.insertCell(0); 
     cell.setAttribute('style' , 'width: 20%'); 
     cell.style.backgroundColor = '#eee'; 
     cell.style.fontWeight = 'bold'; 
     cell.innerHTML = "SRM"; 

     var cell = row.insertCell(1); 
     cell.setAttribute('style' , 'width: 13%'); 
     cell.style.backgroundColor = '#eee'; 
     cell.style.fontWeight = 'bold'; 
     cell.innerHTML = "Target User"; 

     var cell = row.insertCell(2); 
     cell.setAttribute('style' , 'width: 20%'); 
     cell.style.backgroundColor = '#eee'; 
     cell.style.fontWeight = 'bold'; 
     cell.innerHTML = "Target User Name"; 

     for (row = 0; row < data[i].targetUsers.length; row++) 
     { 
      tr = document.createElement('tr'); 
      td = document.createElement('td'); 
      tr.appendChild(td); 
      td.innerHTML = data[i].targetUsers[row].srm; 
      table.appendChild(tr); 

      td = document.createElement('td'); 
      tr.appendChild(td); 
      td.innerHTML = data[i].targetUsers[row].targetUser; 

      td = document.createElement('td'); 
      tr.appendChild(td); 
      td.innerHTML = data[i].targetUsers[row].targetUserName; 


     } 

    document.getElementById('tableContainer').appendChild(table); 
    } 

Answer 1

Основываясь на вашем JSFiddle, ваш div.innerHTML = div.innerHTML; на линии 10 должен быть последним оператором вашей наружной цикл (по линии 76). В противном случае ваша таблица не получит <tbody>, что приведет к сбою бутстрапа.

Вот неподвижная один: http://jsfiddle.net/wsLzk5wq/

Answer 2

Если это только последняя таблица можно добавить пользовательские CSS для последнего элемента таблицы с помощью дочернего селектора.

Например

HTML:

<div class="parent-container"> 
    <table> 
    ....... 
    </table> 
</div> 

CSS:

.parent-container table:last-child { 
    padding: 10px !important; 
    ....... 
}