動態創建引導表鬆散間距調整

Question

我有一個引導表在我的代碼中重複兩次：一個使用HTML代碼創建，另一個使用動態JavaScript。

當我使用HTML時，引導工作正常，並且相應地繪製了表格。

我用javascript來創建它，列失去了它的比例間距。

我期望的結果在兩個代碼中都是一樣的。

爲什麼動態創建的不符合HTML創建表的原始間距？我需要兩個表完全一樣...

有沒有人可以幫助我。

原始代碼：

<p>HTML table</p> 


<div class="table-responsive"> 
    <table class="table table-striped table-bordered table-hover table-condensed small"> 

     <thead> 
      <tr> 
       <th><strong>Item</strong></th> 
       <th><strong>Description</strong></th> 
       <th><strong>Value</strong></th> 
      </tr> 
     </thead> 
     <tr> 
      <td>Item01</td> 
      <td>Item02</td> 
      <td>Item03</td> 
     </tr> 
     <tr> 
      <td>Item11</td> 
      <td>Item12</td> 
      <td>Item13</td> 
     </tr> 
     <tr> 
      <td>Item21</td> 
      <td>Item22</td> 
      <td>Item23</td> 
     </tr> 
    </table> 
</div> 

<p>Javascript table</p> 

<div id="myMenu"> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     /// 
     /// Main table 
     /// 
     var tableDiv = $("<div class='table-responsive'>"); 

     $('#myMenu').append(tableDiv); 

     var table = $("<div class='table table-striped table-bordered table-hover table-condensed small'>"); 

     tableDiv.append(table); 

     /// 
     /// Table head 
     /// 
     html = "<thead>" + 
       " <tr>" + 
       "  <th><strong>Item</strong></th>" + 
       "  <th><strong>Description</strong></th>" + 
       "  <th><strong>Value</strong></th>" + 
       "  </tr>" + 
       "</thead>"; 

     var tableHead = $(html); 
     table.append(tableHead); 

     /// 
     /// Table data 
     /// 
     var gridRowCount = 5; 

     for (var rowCount = 0; rowCount < gridRowCount; rowCount++) { 
      html = "<tr>"; 

      for (var fieldCount = 1; fieldCount < 4; fieldCount++) { 
       var str = "Item" + rowCount.toString() + fieldCount.toString(); 
       html = html + "<td>" + str + "</td>"; 
      } 
      html = html + "</tr>"; 

      alert(html); 

      table.append($(html)); 
     } 
    }); 

</script> 

的jsfiddle：

JsFiddle

Answer 1

讓你的代碼

var table = $("<table class='table table-striped table-bordered table-hover table-condensed small'>");

使用table以下變化，而不是div

它的工作原理