一、表格中插入下拉框的情况

问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来

1、表格中下拉框被隐藏----方法1

这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最下面的表格的下拉框展开之后会撑开表格的滚动条显示出来

这个办法只是简单是修改了一下css:

.layui-table-cell{overflow: visible;}

2、表格中下拉框被隐藏----方法2

第二种办法就是给下拉框加上这个属性:lay-ignore.忽略了美化效果自然就是普通的下拉框了,可以正常显示的,但是效果并不美观,你觉得不是你想要的,别急,我给它美观一下.

首先给select表单加了lay-ignore属性,这样子就变成普通的表单了.

再美化一下css改变效果:

 .table_select { width: 100%; height: 38px;            line-height: 1.3;            line-height: 38px \9;            border-width: 1px;            border-style: solid;            border-color: #ccc;            background-color: #fff;            border-radius: 2px;            padding-left:10px;        }        .table_select option{            padding: 0 10px;            line-height: 36px;            white-space: nowrap;            overflow: hidden;            text-overflow: ellipsis;}        /*修改表单默认文字颜色*/        input, textarea,select {            color: #999; /* 光标的颜色*/            text-shadow: 0px 0px 0px #999; /* 文本颜色 */            -webkit-text-fill-color: transparent; }        input::-webkit-input-placeholder,select::-webkit-input-placeholder { color: rgb(60, 0, 248); /* 改变placeholder文本颜色 */ text-shadow: none; -webkit-text-fill-color: initial; }

大家可以看到效果了,只是默认效果跟原来的差不多一样,只是点击效果内容有点丑,也勉强接受..

3、表格中下拉框被隐藏----方法3

参考:@FIRSTK 的bootstrap下拉菜单组件 https://fly.layui.com/jie/20494/由于这个版本当时是layui-v2.24版本的,现在插件已经到2.4.5了,做的时候同步就有点麻烦,所以要切换成旧版本的.bootstrap下拉菜单效果如果,需要的也可以用:

         操作                     
功能
            
另一个功能
            
其他
                        
分离的链接