title: Dynamically created bootstrap table loose spacing adjusting
body: <p>I have the a bootstrap table repeated twice in my code: one created using just HTML code and another using dynamic javascript.</p>
  
  <p>When I use HTML, the bootstrap works fine and the table is plotted accordingly.</p>
  
  <p>Whan I use javascript to create it, the columns looses its proportional spacing.</p>
  
  <p>The result I expect is the same in both code.</p>
  
  <p>Why does the dynamic created one does not respect the original spacing that the HTML created table has ? I need both tables to be exactly the same...</p>
  
  <p>Does anyone can help me with that.</p>
  
  <p>Original code: </p>
  
  <pre><code>&lt;p&gt;HTML table&lt;/p&gt;
  
  
  &lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-bordered table-hover table-condensed small"&gt;
  
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;strong&gt;Item&lt;/strong&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;strong&gt;Value&lt;/strong&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Item01&lt;/td&gt;
              &lt;td&gt;Item02&lt;/td&gt;
              &lt;td&gt;Item03&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Item11&lt;/td&gt;
              &lt;td&gt;Item12&lt;/td&gt;
              &lt;td&gt;Item13&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Item21&lt;/td&gt;
              &lt;td&gt;Item22&lt;/td&gt;
              &lt;td&gt;Item23&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Javascript table&lt;/p&gt;
  
  &lt;div id="myMenu"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
  
          /// 
          /// Main table
          ///
          var tableDiv = $("&lt;div class='table-responsive'&gt;");
  
          $('#myMenu').append(tableDiv);
  
          var table = $("&lt;div class='table table-striped table-bordered table-hover table-condensed small'&gt;");
  
          tableDiv.append(table);
  
          ///
          /// Table head
          ///
          html = "&lt;thead&gt;" +
                 "    &lt;tr&gt;" +
                 "        &lt;th&gt;&lt;strong&gt;Item&lt;/strong&gt;&lt;/th&gt;" +
                 "        &lt;th&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;/th&gt;" +
                 "        &lt;th&gt;&lt;strong&gt;Value&lt;/strong&gt;&lt;/th&gt;" +
                 "     &lt;/tr&gt;" +
                 "&lt;/thead&gt;";
  
          var tableHead = $(html);
          table.append(tableHead);
  
          ///
          /// Table data
          ///
          var gridRowCount = 5;
  
          for (var rowCount = 0; rowCount &lt; gridRowCount; rowCount++) {
              html = "&lt;tr&gt;";
  
              for (var fieldCount = 1; fieldCount &lt; 4; fieldCount++) {
                  var str = "Item" + rowCount.toString() + fieldCount.toString();
                  html = html + "&lt;td&gt;" + str + "&lt;/td&gt;";
              }
              html = html + "&lt;/tr&gt;";
  
              alert(html);
  
              table.append($(html));
          }
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>JsFiddle:</p>
  
  <p><a href="http://jsfiddle.net/cox123456a/kAk4c/2/" rel="nofollow">JsFiddle</a></p>