如何添加自动滚动到'resizable'<div>?</div>

时间:2013-08-22 17:20:54

标签: javascript jquery html css

我在div中使用JQuery'resizable'。当我将列多个列添加到一行时,它应该水平并且一次超出屏幕空间,启用水平滚动条..与垂直滚动条相同..我需要修复高度,如果它在多行期间越过高度另外,它应该启用垂直滚动。我使用下面的代码..

 <div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Overview</h3>
         <table id="table1" class="table1">       

                <tr class="even">
                    <td>
                        <div id="rowColumn" class="rowColumn">         
                            <select id="ddlNumber" name="ddlNumber" class="ddlNumber" style="height:20px; Width:160px;" >                        
                              <option value="1">1</option>
                              <option value="2">2</option>                                  
                            </select>
                            <select id="ddlMatch" name="ddlMatch" class="ddlMatch" style="height:20px; Width:120px;" > </select>                            

                            <input type="text" id="textMatchMe" name="textMatchMe" class="textMatchMe" style="height:20px; width:140px"/>
                            <input type="text" id="textMatchMeNumber" name="textMatchMeNumber" class="textMatchMeNumber" style="height:20px; width:140px" "/>
                             <input type="button" id="btnAddColumn" name="btnAddColumn" class="addcolumn add" value="OR" style="height:auto;"/>
                        </div>
                    </td>
                </tr>               
        </table>

        <div>

            <input type="button" id="btnAddRow" name="btnAddRow" class="btnAddRow" value="AND" style="height:auto; "/>                
        </div>               
</div>

提前致谢..

-DK

1 个答案:

答案 0 :(得分:1)

设置最大宽度和最大高度。

table {
  max-width:600px;
  max-height:600px;
  overflow-y:scroll;
  overflow-x:scroll;
}