bootstrap表不響應，我在表數據內使用輸入字段

Question

我使用bootstrap表，表內數據有輸入字段和顯示滾動條。我不想滾動條並用響應式設計打破單詞。

<div class="table-responsive"> 
<table class="table table-bordered inventory"> 
<thead> 
<tr> 
<th><input class="check_all" type="checkbox" onclick="select_all()"></th> 
<th>S. No</th> 
<th>Product Name</th> 
<th>Item Code</th> 
<th>Quantity</th> 
<th>Rate ($)</th> 
<th>Total ($)</th> 
</tr> 
</thead> 

<tr> 
<td><input type="checkbox" class="case"></td> 
<td><span id="snum">1</span></td> 
<td><input type="text" id="productname_1" name="productname[]" value="Rose Petal Garlands" required="" class="ui-autocomplete-input" autocomplete="off"> </td> 
<td><input class="itemcode ui-autocomplete-input" type="text" id="itemcode_1" name="itemcode[]" value="RPG001" required readonly autocomplete="off"></td> 
<td><input type="text" class="number quantity ui-autocomplete-input" id="quantity_1" name="quantity[]" value="5" required autocomplete="off"></td> 
<td><input type="text" class="number productprice" id="productprice_.1" name="productprice[]" value="5" required></td> 
<td><input type="text" class="number tcost" id="tcost_1" name="tcost[]" readonly="readonly" required></td> 
</tr> 
<tr>         
<td><input type="checkbox" class="case"></td> 
<td><span id="snum">2</span></td> 
<td><input type="text" id="productname_2" name="productname[]" value="Jasmine Flowers" required></td> 
<td><input class="itemcode" type="text" id="itemcode_2" name="itemcode[]" value="JF001" required readonly></td> 
<td><input type="text" class="number quantity" id="quantity_1" name="quantity[]" value="10" required></td> 
<td><input type="text" class="number productprice" id="productprice_.2" name="productprice[]" value="13" required></td> 
<td><input type="text" class="number tcost" id="tcost_1" name="tcost[]" readonly="readonly" required></td> 
</tr> 
</tbody> 
</table> 
</div> 

的jsfiddle：DEMO

Answer 1

<div class="table-responsive"> 
<table class="table table-bordered inventory"> 
<thead> 
<tr> 
<th><input class="check_all" type="checkbox" onclick="select_all()"></th> 
<th>S. No</th> 
<th>Product Name</th> 
<th>Item Code</th> 
<th>Quantity</th> 
<th>Rate ($)</th> 
<th>Total ($)</th> 
</tr> 
</thead> 

<tr> 
<td><input type="checkbox" class="case"></td> 
<td><span id="snum">1</span></td> 
<td><input type="text" id="productname_1" name="productname[]" value="Rose Petal Garlands" required="" class="ui-autocomplete-input" autocomplete="off"> </td> 
<td><input class="itemcode ui-autocomplete-input" type="text" id="itemcode_1" name="itemcode[]" value="RPG001" required readonly autocomplete="off"></td> 
<td><input type="text" class="number quantity ui-autocomplete-input" id="quantity_1" name="quantity[]" value="5" required autocomplete="off"></td> 
<td><input type="text" class="number productprice" id="productprice_.1" name="productprice[]" value="5" required></td> 
<td><input type="text" class="number tcost" id="tcost_1" name="tcost[]" readonly="readonly" required></td> 
</tr> 
<tr>         
<td><input type="checkbox" class="case"></td> 
<td><span id="snum">2</span></td> 
<td><input type="text" id="productname_2" name="productname[]" value="Jasmine Flowers" required></td> 
<td><input class="itemcode" type="text" id="itemcode_2" name="itemcode[]" value="JF001" required readonly></td> 
<td><input type="text" class="number quantity" id="quantity_1" name="quantity[]" value="10" required></td> 
<td><input type="text" class="number productprice" id="productprice_.2" name="productprice[]" value="13" required></td> 
<td><input type="text" class="number tcost" id="tcost_1" name="tcost[]" readonly="readonly" required></td> 
</tr> 
</tbody> 
</table> 
</div> 

的jsfiddle：DEMO