我想为我的html表设置水平滚动条，但它不适用于我，超出浏览器限制的表。我在下面添加了我的代码的详细信息，请帮我找到解决方案。提前谢谢。
<table cellspacing="10" border="1" width="1200px">
<tr style="border-style: none;">
<td style="border-style: none;">
<asp:Repeater runat="server" ID="rptItems">
<HeaderTemplate>
<table id="tblDetItems" border="1" style="font-size: 9pt; border-color: #A9A9A9;
position: relative;" class="display" cellspacing="0">
<thead style="background: #808080; color: White; font-weight: bold; border-color: White;">
<tr>
<th style="width: 10px;">
SlNo.
</th>
<th style="width: 200px;">
Item Code
</th>
<th style="width: 300px;">
Description
</th>
<th style="width: 80px;">
Group
</th>
<th style="width: 100px;">
Supplier
</th>
<th style="width: 100px;">
Material
</th>
<th style="width: 100px;">
Scode1
</th>
<th style="width: 100px;">
Labour1
</th>
<th style="width: 100px;">
Scode2
</th>
<th style="width: 100px;">
Labour2
</th>
<th style="width: 100px;">
Scode3
</th>
<th style="width: 100px;">
Labour3
</th>
<th style="width: 100px;">
Scode4
</th>
<th style="width: 100px;">
Labour4
</th>
<th style="width: 100px;">
Scode5
</th>
<th style="width: 100px;">
Labour5
</th>
<th style="width: 100px;">
A Scode
</th>
<th style="width: 100px;">
Assembly
</th>
<th style="width: 100px;">
Replace Cost
</th>
<th style="width: 100px;">
Total
</th>
</tr>
<tr style="background-color: Silver; height: 45px;">
<th style="width: 10px;">
<input type="text" runat="server" style="width: 60px;" id="txtslno_tbl" />
</th>
<th style="width: 200px;">
<input type="text" runat="server" style="width: 200px;" id="txt_ItemCode_tbl" />
</th>
<th style="width: 300px;">
<input type="text" runat="server" style="width: 300px;" id="txtDesc_tbl" />
</th>
<th style="width: 80px;">
<input type="text" runat="server" style="width: 80px;" id="txtGroup_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Supplier_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Material_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_SCode1_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Labour1_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_SCode2_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Labour2_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_SCode3_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Labour3_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_SCode4_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Labour4_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_SCode1_tb5" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Labour1_tb5" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_A_SCode_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Assembly_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_ReplaceCost_tbl" />
</th>
<th style="width: 100px;">
<input type="text" runat="server" style="width: 100px;" id="txt_Total_tbl" />
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr id="tr_id">
<td id="slno" style="width: 10px; text-align: right; height: 13px;">
<%# Eval("sl_no")%>
</td>
<td style="width: 200px; height: 13px;">
<%# Eval("item_cd")%>
</td>
<td style="width: 300px; height: 13px;">
<input type="text" runat="server" style="width: 290px; text-align: left; height: 13px;"
class="fooClass" id="txt_item_desc" value='<%# Eval("item_desc")%>' />
</td>
<td style="width: 80px; height: 13px;">
<input type="text" runat="server" style="width: 70px; text-align: left; height: 13px;"
id="txt_gp_cd" value='<%# Eval("gp_cd")%>' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_sup_scode" value='<%# Eval("sup_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_material" value='<%# Eval("mtrl_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_sup_scode1" value='<%# Eval("lbr1_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_labour1" value='<%# Eval("lbr1_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_sup_scode2" value='<%# Eval("lbr2_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_labour2" value='<%# Eval("lbr2_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_sup_scode3" value='<%# Eval("lbr3_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_labour3" value='<%# Eval("lbr3_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_sup_scode4" value='<%# Eval("lbr4_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_labour4" value='<%# Eval("lbr4_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_sup_scode5" value='<%# Eval("lbr5_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_labour5" value='<%# Eval("lbr5_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: left; height: 13px;"
id="txt_a_s_scode" value='<%# Eval("assmbly_scode")%>' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_assembly" value='<%# Eval("assmbly_chrge")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<input type="text" runat="server" style="width: 90px; text-align: right; height: 13px;"
maxlength="10" id="txt_replace_cost" value='<%# Eval("replace_cost")%>' onkeydown='return isNumberKey(event)' />
</td>
<td style="width: 100px; text-align: right; height: 13px;">
<%# Eval("purc_rate")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</table>
jquery的：
$(document).ready(function () {
var table = $('#tblDetItems').DataTable({
"paging": false,
"keys": true,
"retrieve": true,
"bLengthChange": false,
"ordering": false,
"scrollY": 250,
"scrollX": true
});
});
答案 0 :(得分：2)
@Reshma，我会说使用bootstrap更好，在bootstrap中有一个“表响应”类，这将解决你的问题，请看看我的plunker示例。
<div class="table-responsive">
<table class="table"></table>
<div>