I wanted to change my column width of the bootstrap table i am using. I tried a lot of tips to change the width, but nothing helps. My table is still out of the window.

Here’s the code of the table:

            <div class="container" style="margin-left:1px ;">
            <form enctype="multipart/form-data">
                  <table class="table table-stripped" id="tbl_posts_koz">
                    <thead style="background-color:#c7c8cc;">
                      <tr>
                        <th class="col-1">Merk</th>
                        <th class="col-1">Lengte rooster</th>
                        <th class="col-1">Type rooster</th>
                        <th class="col-1">Capaciteit [dm3/s]</th>
                        <th class="col-1">Max. capaciteit [dm3/s]</th>
                        <th class="col-1">Verblijfsgebied</th>
                        <th class="col-1">Verblijfsruimte</th>
                        <th class="col-1">Verwijderen</th>
                      </tr>
                    </thead>
                    <tbody id="tbl_posts_body_koz">
                      <tr id="rec_koz-1">
                        <td><input class="inputtext" type="text" name="" placeholder="Merk"> </td>
                        <td><input class="inputtext" type="text" name="" placeholder="Lengte rooster"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Type rooster"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Max. capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsgebied"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsruimte"></td>
                        <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </form>

              <div style="display:none;">
              <table id="sample_table_koz">
                <tr id="">
                  <td><input class="inputtext" type="text" name="" placeholder="Merk"> </td>
                        <td><input class="inputtext" type="text" name="" placeholder="Lengte rooster"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Type rooster"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Max. capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsgebied"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsruimte"></td>
                  <td><a class="btn btn-xs delete-record_koz" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td>
               </tr>
             </table>
             </div>
          </div>
      </div>
      </table>

With this table i can dynamically add and remove rows. Thats why i use the bootstrap table. On this page i have some other bootstrap tables (with less columns) i also cant change the widt of these tables. See example:

          <div class="container" style="margin-left:1px ;">
            <form enctype="multipart/form-data">
                  <table class="table table-stripped" id="tbl_posts_vg">
                    <thead style="background-color:#c7c8cc;">
                      <tr>
                        <th class="col-md-1">Nummer</th>
                        <th class="col-md-1">Naam</th>
                        <th class="col-md-1">Oppervlakte [m2]</th>
                        <th class="col-md-1">Verwijderen</th>
                      </tr>
                    </thead>
                    <tbody id="tbl_posts_body_vg">
                      <tr id="rec_vg-1">
                        <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td>
                        <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td>
                        <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td>
                        <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </form>

              <div style="display:none;">
              <table id="sample_table_vg">
                <tr id="">
                  <td><input class="inputtext" type="text" name="" placeholder="Nummer"> </td>
                 <td><input class="inputtext" type="text" name="" placeholder="Naam"> </td>
                 <td><input class="inputtext" type="text" name="" placeholder="[m2]"></td>
                 <td><a class="btn btn-xs delete-record_vg" data-id="0"><i class="glyphicon glyphicon-trash"></i></a></td>
               </tr>
             </table>
             </div>
            </div>
      </div>
      </table>

Can someone tell me where its going wrong?