Как добавить скроллер вокруг стола, используя HTML и Javascript?

Question

Я разработал динамическую таблицу для получения ввода от пользователя. Каждый столбец таблицы содержит различные типы полей, такие как текстовое поле, раскрывающийся список, флажок и т. Д. Что нужно сделать, чтобы добавить скроллер вокруг таблицы? Я искал его в Интернете, но я мог найти решение только для простого текста в таблице, а другие решения были слишком сложными. Если вы можете отослать меня на какой-нибудь сайт, который рассказывает об этом, это будет здорово.

Как показано ниже:

<table width="98%" border="0" cellpadding="1" cellspacing="1" align="center">
        <tr>
        <td>
        <input name="addRow" type="button" class="btn" value=" + " onclick="this.form.changeType.value='addRow';document.FileUploadFormatAdd.submit()"></input>
        </td>
        <td>
        <input name="deleteRow" type="button" class="btn" value=" - " onclick="this.form.changeType.value='deleteRow';document.FileUploadFormatAdd.submit()"></input>
        </td>
        </tr>
        <tr>

                <td width="3%" class="bandcolorsubheader">Sr No.</td>
                <td width="6%" class="bandcolorsubheader">Field Name*</td>
                <td width="4%" class="bandcolorsubheader">Min Length</td>
                <td width="4%" class="bandcolorsubheader">Max Length</td>
                <td width="6%" class="bandcolorsubheader">Type*</td>
                <td width="4%" class="bandcolorsubheader">Future Date Allowed</td>
                <td width="4%" class="bandcolorsubheader">Past Date Allowed</td>
                <td width="4%" class="bandcolorsubheader">Required Field</td>
                <td width="6%" class="bandcolorsubheader">Depends Upon Field Name</td>
                <td width="7%" class="bandcolorsubheader">Depends Upon Field Value(Comma Separated Values)</td>
                <td width="4%" class="bandcolorsubheader">Min Value</td>
                <td width="4%" class="bandcolorsubheader">Max Value</td>
                <td width="4%" class="bandcolorsubheader">Field Order*</td>
                <td width="35%" class="bandcolorsubheader">Sql Query</td>
                <td width="5%" class="bandcolorsubheader">Date Format</td>
            </tr>
        <input type="hidden" name="noOfRows" value="<%=noOfRows%>">
        <% 
            try
            {
        %>
        <%
        Iterator iterFieldValues=listOfFields.iterator();
        debugger="9";
        %>
        <%
            String classColor = null;
            for (int i=1;i<=noOfRows;i++){
        %>
        <% 
                    if((i%2)==0)
                      classColor = "tblrowwhite";
                 else
                      classColor = "tblrowgrey";
            %>
        <tr>
        <td width="3%" class="<%=classColor%>">
        <%=i%>
        </td>

        <%
        String fieldName=(String)iterFieldValues.next();
        %>
        <td width="6%" class="<%=classColor%>">
        <input type="text" class="ibox" name="<%="reqdFieldName"+i%>" value="<%=(fieldName!=null)?fieldName:""%>" size="20" MAXLENGTH="100"  <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>>
        </td>
        <%
        String minLength=(String)iterFieldValues.next();
        %>
        <td width="4%" class="<%=classColor%>">
        <input type="text" class="ibox"  name="<%="minLength"+i%>" value="<%=(minLength!=null)?minLength:""%>" size="10" MAXLENGTH="5" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>>
        </td>
        <%
        String maxLength=(String)iterFieldValues.next();
        %>
        <td width="4%" class="<%=classColor%>">
        <input type="text" class="ibox" name="<%="maxLength"+i%>" value="<%=(maxLength!=null)?maxLength:""%>" size="10" MAXLENGTH="5" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
        </td>
        <%
        String fieldType=(String)iterFieldValues.next();
        %>

        <td width="6%" class="<%=classColor%>">
        <select name="<%="reqdType"+i%>" class="cbox"  onchange='EnableFields(this)' <%=operationType.trim().equalsIgnoreCase("view")?"disabled":""%>> 
        <option value=""  >Select</option>
        <%
            Iterator iter=fieldValidationTypes.iterator();
            while(iter.hasNext())
            {
                String fieldValidationType=(String)iter.next();
                if(fieldValidationType!=null&&!fieldValidationType.trim().equals(""))
                {

        %>

        <option value="<%=fieldValidationType%>" <%=fieldType.equals(fieldValidationType)?"selected":"" %> ><%=fieldValidationType.toUpperCase()%></option>
        <%
                }
            }
        %>
        </select>
        </td>

        <%
        String isFutureDateAllowedValue=(String)iterFieldValues.next();
        %>

        <td width="4%" class="<%=classColor%>">
        <input type="checkBox" value="1"  name="<%="isFutureDateAllowed"+i%>" <%=isFutureDateAllowedValue.equals("1")?"checked":""%> <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("Date")?"":"disabled"%> > 
        </td>
        <%
        String isPastDateAllowedValue=(String)iterFieldValues.next();
        %>
        <td width="4%" class="<%=classColor%>">
        <input type="checkBox" value="1" name="<%="isPastDateAllowed"+i%>" <%=isPastDateAllowedValue.equals("1")?"checked":""%> <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("Date")?"":"disabled"%> > 
        </td>
        <%
        String isReqdFieldValue=(String)iterFieldValues.next();
        %>

        <td width="4%" class="<%=classColor%>">
        <input type="checkBox" value="1"  name="<%="isReqdField"+i%>" <%=isReqdFieldValue.equals("1")?"checked":""%> <%=operationType.trim().equalsIgnoreCase("view")?"disabled":""%> > 
        </td>
        <%
        String dependsUponFieldName=(String)iterFieldValues.next();
        %>
        <td width="6%" class="<%=classColor%>">
        <input type="text" class="ibox" name="<%="dependsUponFieldName"+i%>" value="<%=(dependsUponFieldName!=null)?dependsUponFieldName:""%>" size="20" MAXLENGTH="100" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
        </td>
        <%
        String dependsUponFieldValue=(String)iterFieldValues.next();
        %>
        <td width="7%" class="<%=classColor%>">
        <input type="text" class="ibox" name="<%="dependsUponFieldValue"+i%>" value="<%=(dependsUponFieldValue!=null)?dependsUponFieldValue:""%>" size="20" MAXLENGTH="500" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>>
        </td>
        <%
        String minValue=(String)iterFieldValues.next();
        %>
        <td width="4%" class="<%=classColor%>">
        <input type="text" class="ibox" name="<%="minValue"+i%>" value="<%=(minValue!=null)?minValue:""%>" size="10" MAXLENGTH="10" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>>
        </td>
        <%
        String maxValue=(String)iterFieldValues.next();
        %>
        <td width="4%" class="<%=classColor%>">
        <input type="text"  name="<%="maxValue"+i%>" class="ibox" value="<%=(maxValue!=null)?maxValue:""%>" size="10" MAXLENGTH="10" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>>
        </td>
        <%
        String fieldOrder=(String)iterFieldValues.next();
        %>
        <td width="4%" class="<%=classColor%>">
        <input type="text"  name="<%="reqdFieldOrder"+i%>" class="ibox" value="<%=(fieldOrder!=null)?fieldOrder:""%>" size="10" MAXLENGTH="3" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
        </td>
        <%
        String sqlQuery=(String)iterFieldValues.next();
        %>

        <td width="35%" class="<%=classColor%>">
        <input type="text"  name="<%="sqlQuery"+i%>" value="<%=(sqlQuery!=null)?sqlQuery:""%>" size="65" MAXLENGTH="1000" <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("codenosql")?"":"readonly"%>> 
        </td>
        <%
        String dateFormat=(String)iterFieldValues.next();
        %>
        <td width="5%" class="<%=classColor%>">
        <input type="text"  name="<%="dateFormat"+i%>" class="ibox" value="<%=(dateFormat!=null)?dateFormat:""%>" size="10" MAXLENGTH="1000" <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("Date")?"":"readonly"%>> 
        </td>
        </tr>
        <%}%>
        <%
            }
        catch(Exception e)
        {
            response.sendRedirect("error.jsp?entity=interfaces&mesg="+"Error while loading page." );
        }

        %>


        </table>
        <br>
        <table width="100%" border="0" cellpadding="2" cellspacing="1">
        <tr>
        <input type="hidden" name="operationType" value="<%=operationType%>">
        <input type="hidden" name="changeType" value="">
        <%
            if(!operationType.trim().equals("view"))
            {
        %>
        <input name="addFileFormat" value="Submit" class="btn" type="button" onclick="this.form.changeType.value='addFileFormat';if(validate(this.form)) document.FileUploadFormatAdd.submit(); "></input>
        <%
            }
        %>
        </tr>
        </table>
    </td>
    </tr>
</table>

Answer 1

Вы пытаетесь установить максимальную ширину / высоту и добавить полосы прокрутки, если таблица в итоге становится больше? Если это так, вы можете сделать это:

<div style="width:500px; height:500px overflow=auto">
<table>
<%buildTable()%>
</table>
</div>

overflow=auto даст вам полосы прокрутки, если это необходимо. Проверьте этот сайт для более подробной информации. Надеюсь, это поможет.