table with styles is not working with bootstrap

Navigation
2

HTML: 

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body onload="montaTabela()"> 
<div class="container">
    <script type="text/javascript"> 
        function montaTabela(){
            document.write("<div class='table-responsive'>"+
                           "<table class='table'>");
            document.write("<thead>"+
                                "<tr>"+
                                    "<th>#</th>"+
                                    "<th>resultado</th>"+
                                    "<th>Valor Digitado</th>"+
                                    "<th>Resposta</th>"+
                                "</tr>"+
                            "</thead>"+
                            "<tbody>"+  
                                "<tr>"+
                                    "<td>dado</td>"+
                                    "<td>30</td>"+
                                    "<td>2</td>"+
                                    "<td>Errado</td>"+
                                "</tr>");
            document.write("</tbody>");
            document.write("</table>");
            document.write("</div>");
        }
    </script>           
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

If I have the code run without the TABLE () function, the code works normally and the table style is set correctly. But if I create and call the TABLE () function, the table style goes unstretched. I have another program that I'm developing, in it I make a function call to do the table assembly, but it did not work, it's not coming out in style ... weird, can someone give me a light?     

asked by anonymous 03.03.2015 / 17:51

1 answer

1

Just call the function to mount the table at the bottom of the page after all the features have been loaded. 

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <script type="text/javascript">
      function montaTabela() {
        document.write("<div class='table-responsive'>" +
          "<table class='table'>");
        document.write("<thead>" +
          "<tr>" +
          "<th>#</th>" +
          "<th>resultado</th>" +
          "<th>Valor Digitado</th>" +
          "<th>Resposta</th>" +
          "</tr>" +
          "</thead>" +
          "<tbody>" +
          "<tr>" +
          "<td>dado</td>" +
          "<td>30</td>" +
          "<td>2</td>" +
          "<td>Errado</td>" +
          "</tr>");
        document.write("</tbody>");
        document.write("</table>");
        document.write("</div>");
      }
    </script>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script>
    montaTabela();
  </script>
</body>
    
03.03.2015 / 18:11
ImportError Python Reportlab Image upload error: Undefined index [duplicate]