Text input in table column size gets reduced - html

Question

I have a form and all inputs are set inside table td, I use text input and bootstrap-select in table row.
All inputs are displayed properly with normal resolution in system.
The display size of text inputs gets reduce when I view that in lower resolution or zoom but bootstrap select does not reduce beyond title text or option text and remains the same.
Also table row width remains same, i.e it tries to fit into screen width instead of expanding with scroll beyond screen width.
I want text input not to reduce display size.
following is my code please help on fixing this.
<div class="span6">
<table id="target-tables"
class="table table-responsive table-striped table-bordered table-hover no-margin no-border">
<thead>
<tr>
<th class="no-border" >Title1</th>
<th class="no-border" >Title2</th>
<th class="no-border" >Title3</th>
<th class="no-border" >Title4</th>
<th class="no-border" >Title5</th>
<th class="no-border" >Title6</th>
<th class="no-border" >Title7</th>
<th class="no-border" >Title8</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" title='Select a database' >
<option value=".....">......</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md"/>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" multiple title="........." >
<option value="......">.....</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" title="........." >
<option value="...">........</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" >
<option value="......">........</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

Your .table needs to be nested INSIDE a .table-responsive class as per Bootstrap's documentation:
Responsive tables Create responsive tables by wrapping any .table in
.table-responsive to make them scroll horizontally on small devices
(under 768px). When viewing on anything larger than 768px wide, you
will not see any difference in these tables.
You have the .table-responsive in the same element as the .table.