form表单,tr循环生成,当超出页面显示时无滚动条

本文涉及的产品
转发路由器TR,750小时连接 100GB跨地域
简介: form表单,tr循环生成,当超出页面显示时无滚动条

1. 在 form 外部加一个 div ;

2. 设置 div 的属性,宽、高、overfow 属性等;

3. 需要设置 table 的宽;

4. 具体代码:

<div class="bootbox-body" style="width: 650px;height: 400px;overflow-y: auto">
    <form  id="zdform"  novalidate="novalidate">
        <div class="UItable">
            <table cellpadding="0" cellspacing="0" border="0" width="100%" id="zdDataTable" class="tableA">
                <tbody>
                    <tr id="zdContent">
                        <td>
                            <label>字典表名:</label>
                        </td>
                        <td>
                            <span class="block input-icon input-icon-right">
                                <input type="text" id="zdName" name="zdName" readonly class="form-control">
                            </span>
                        </td>
                    </tr>
                    <#--循环添加-->
                </tbody>
            </table>
        </div>
    </form>
</div>


5. 页面:

未超出限制:2021012215371071.png

超出限制:

20210122153745257.png


缺点:div 的高度限制死了,不够美观;右侧的滚动条也不够美观。

目前只能这样做了,有更好的办法可以来沟通一下。

相关文章
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1722 0
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
742 3
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
398 0
|
前端开发
css给超出内容设置滚动条和去除滚动条显示:
css给超出内容设置滚动条和去除滚动条显示:
218 0
|
JavaScript
div内容超出自动滚动
div内容超出自动滚动
470 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
131 0
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
|
前端开发
css:overflow-y: scroll内容未超出也显示滚动条
css:overflow-y: scroll内容未超出也显示滚动条
580 0
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
|
JavaScript
div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数
div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数