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 的高度限制死了,不够美观;右侧的滚动条也不够美观。

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

相关文章
|
JavaScript 前端开发
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1703 0
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
329 0
|
JavaScript
div内容超出自动滚动
div内容超出自动滚动
452 0
div内容超出自动滚动
|
JavaScript 小程序
小程序--log居中 失焦获取表单中的值
小程序--log居中 失焦获取表单中的值
小程序--log居中 失焦获取表单中的值
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
|
JavaScript
div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数
div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数
|
JavaScript 前端开发
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令