如何在html表上设置水平滚动条 [英] How to set horizontal scroll bar on html table

问题描述

我想在动态创建的html div（id为PaymentGrid）中添加水平滚动条。

I want to add horizontal scroll bar at html div(id is PaymentGrid) which is dynamically created.

 <asp:Panel runat="server">
 <div class="row clearfix">
 <div class="col-md-12">
 <div class="box">
 <div class="box-body">
 <asp:Panel runat="server" >
 <div id="dvGridView" style="display: none">
 <table id="tblFPS" > </table>
</div>
</panel>
</div>
</div>
</div>
</div>
</panel>

var innerhtml = '<tr><td><div id=\"PaymentGrid\"><table overflow=\"auto\"   border=\"1\">'
innerhtml += "<thead class=\"thead-inverse\">";
                    innerhtml += "<tr>";
                    innerhtml += "<th>Sl. No.</th>";
                    innerhtml += "<th>Name of the Scheme</th>";
                    innerhtml += "<th style='text-align:right'>Alloc Qty</th>";
                    innerhtml += "<th style='text-align:right'>Remaining Qty</th>";
                    innerhtml += "<th style='text-align:right'>Quantity to be Lifted(A)</th>";
                    innerhtml += "<th style='text-align:right'>Commodity Rate(B)</th>";
                    innerhtml += "<th style='text-align:right'>Cartage Rate</th>";
                    innerhtml += "<th style='text-align:right'>Cartage Cost</th>";
                    innerhtml += "<th style='text-align:right'>Cartage Service Rate</th>";
                    innerhtml += "<th style='text-align:right'>Cartage Service Cost</th>";
                    innerhtml += "<th style='text-align:right'>Fix Cartage Rate</th>";
                    innerhtml += "<th style='text-align:right'>Fix Cartage Cost</th>";
                    innerhtml += "<th style='text-align:right'>Fix Cartage  Service Rate</th>";
                    innerhtml += "<th style='text-align:right'>Fix Cartage  Service Cost</th>";
                    innerhtml += "<th style='text-align:right'>Variable Commission(Rs)</th>";
                    innerhtml += "<th style='text-align:right'>Variable Commission Cost(Rs)</th>";
                    innerhtml += "<th style='text-align:right'>Fix Commission (Rs)</th>";
                    innerhtml += "<th style='text-align:right'>Fix Commission Cost(Rs)</th>";
                    innerhtml += "<th style='text-align:right'>Total Commission (G)</th>";
                    innerhtml += "<th style='text-align:right'>Commodity Cost (D=(A*B)-G)</th>";
                    innerhtml += "<th style='text-align:right'>Cartage Cost (E)</th>";
                    innerhtml += "<th style='text-align:right'>Total Amount Payable(F=D+E)</th>";
                    innerhtml += "</tr>";
                    innerhtml += "</thead>";

我尝试过：



$（'＃tblFPS' ）.append（innerhtml）;

What I have tried:

$('#tblFPS').append(innerhtml );

推荐答案

（'＃tblFPS'）。append（innerhtml）;

('#tblFPS').append(innerhtml );

替换Panel3标记以下

Replace you Panel3 tag with following

<asp:panel id="Panel2" runat="server" style="width: 550px; overflow-x: auto; overflow-y: auto;height: 400px;" xmlns:asp="#unknown"></asp:panel>

这会将控件的高度设置为400px，宽度设置为550px。你可以改变它。现在，如果宽度或高度超过这些值，则会出现滚动。

This will set the height of your control to 400px and width to 550px. You can change it. Now in anycase if width or height exceeds these values a scroll will appear.

<style type="text/css">
    div.horizontal {
    width: 100%;
   
    overflow: auto;
}
        </style>

<div class="horizontal">
<table id="tblFPS"> </table></div>

这篇关于如何在html表上设置水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！