【问题标题】:bootstrap table not responsive, i'm using input field inside table data引导表没有响应,我正在使用表数据中的输入字段
【发布时间】:2015-04-09 21:13:30
【问题描述】:

我正在为表格使用引导程序,内部表格数据有输入字段和显示滚动条。我不想滚动条和响应式设计断字。

<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

【问题讨论】:

  • 我认为您问错了问题,因为该表是响应式的
  • 是的,表格是响应式的。我的问题是表格不要用滚动条扩展到大,只是用窗口固定。
  • 谢谢,正是期待这个

标签: html twitter-bootstrap-3


【解决方案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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-10-19
    • 1970-01-01
    • 2014-12-17
    • 2013-08-27
    • 1970-01-01
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多