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就将它遮盖了),就来问我怎么弄。
1715 0
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
695 3
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
362 0
|
JavaScript
div内容超出自动滚动
div内容超出自动滚动
462 0
div内容超出自动滚动
|
JavaScript 小程序
小程序--log居中 失焦获取表单中的值
小程序--log居中 失焦获取表单中的值
小程序--log居中 失焦获取表单中的值
【Layui】操作成功后返回父级并且刷新
【Layui】操作成功后返回父级并且刷新
112 0
【Layui】操作成功后返回父级并且刷新
layui子页面获取父页面input框中的值
本文介绍如何在layui子页面获取父页面input框中的值。
746 0
layui子页面获取父页面input框中的值