Bootstrap表未正确显示

Question

我使用JavaScript循环一些数据并构建了许多表，并使用Bootstrap和类表table-hover。除了要生成的最后一个表之外，这在所有表上都可以正常工作。底部表总是平方，悬停在上面不起作用。列重新调整到正确的大小但是关于它。

我无法解决，两个表都声明了类：

无论制作了多少个表，它总是发生在最后一个表上。我应该指出，我已经尝试了所有我能想到的事情，包括在循环中添加一个虚拟表和最后一次交互，但那时会产生两个压缩表。

更新：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应该是您的外部for循环的最后一个语句（在76行）。否则你的桌子没有<tbody>，导致自举失灵。

以下是固定的：http://jsfiddle.net/wsLzk5wq/

Answer 2

如果它只是最后一个表，你可以使用子选择器为最后一个表元素添加自定义css。

E.g

HTML：

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

CSS：

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