由JS创建的行不适应css

Question

我不明白为什么当我手动将一个硬编码的行添加到我的表中时，生成的行很适合表，但是当我直接用生成的行填充表时，它显示错误。

应用相同的CSS，为什么会发生？

例如1（好）：

例如2（错误）：

HTML：

<div class="col-sm-3 sidenav">
<div class="panel panel-default">           
<table class="table table-hover table.size">
  <tbody id="table">
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </td>
      <td class="text-right text-nowrap">
        <button class="btn btn-xs btn-info">edit</button>
        <button class="btn btn-xs btn-warning">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </td>
    </tr>           
  </tbody>
</table>
</div>

JS：

  var row =
        "<td>"
           + "<a href='#' style='text-decoration:none;'>Bob</a>"
        + "</td>"
        + "<td class='text-right text-nowrap'>"
           +"<button class='btn btn-xs btn-info'>edit</button>"
           +" <button class='btn btn-xs btn-warning'>"
              +"<span class='glyphicon glyphicon-trash'></span>"
           +"</button>"
        +  "</td>"

        var trow = document.createElement("tr");
        trow.innerHTML = row;

        document.getElementById("table").appendChild(trow);