Bootstrap: table goes out of bounds

Question

I am trying to make a table inside a well inside modal. Here is the code snippet:

<div class="modal-body"> <form class="form-horizontal"> <form class="well form-inline"> <label><h5>rtu</h5></label> <table class="table table-bordered"> <tr> <th>mid</th> <th>type</th> <th>inverce</th> <th>mbaddr</th> <th>din_reg_offset</th> <th>din_type</th> <th>dout_reg_offset</th> <th>dout_type</th> <th>ain_reg_offset</th> <th>ain_type</th> <th>aout_reg_offset</th> <th>aout_type</th> <th>float_type</th> </tr> <tr> <td><input type="text" id="mid"></td> <td><input type="text" id="type"></td> <td><input type="text" id="inverce"></td> <td><input type="text" id="mbaddr"></td> <td><input type="text" id="din_reg_offset"></td> <td><input type="text" id="din_type"></td> <td><input type="text" id="dout_reg_offset"></td> <td><input type="text" id="dout_type"></td> <td><input type="text" id="ain_reg_offset"></td> <td><input type="text" id="ain_type"></td> <td><input type="text" id="aout_reg_offset"></td> <td><input type="text" id="aout_type"></td> <td><input type="text" id="float_type"></td> </tr> </table> </form> </form> 

But the table did not fit into the borders of the borders. Like this:

But I want something like this: What have I done wrong? Thanks.

Answer 1

The layout of the table is incorrect. He must follow this format.

 <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> 

(From http://www.w3schools.com/tags/tag_table.asp )

Answer 2

You can use class="input-mini" or class="input-small" on your inputs to make them smaller. But the table will always have a fixed minimum width with your inputs in it, and well will resize the content around it. You may still encounter problems in small browser windows.