layui怎么表格中显示图片


当前第2页 返回上一页

这个图片压根显示不全,可以这样来解决

1

2

3

4

5

6

7

8

9

10

11

12

<div class="demoTable">

        <button class="layui-btn" data-type="publish">发布Banner</button>

    </div>

    <table class="layui-hide" id="banner"></table>

  

<style type="text/css">

    .layui-table-cell{

        text-align:center;

        height: auto;

        white-space: normal;

    }

</style>

可以看到我在底部加上了样式,这里有优先级的问题,所以必须是放在最下面,谨记!!!

但是目前效果是这样的:

layui12.png

貌似高度好了,但是这个宽是什么鬼,于是我就F12了一下

layui13.png

原来如此,layui内部定义了这么一个样式,所以话不多说,改!

1

2

3

4

5

6

7

8

9

<style type="text/css">

.layui-table-cell{

    text-align:center;

    height: auto;

    white-space: normal;

}

.layui-table img{

    max-width:300px

}

加入了.layui-table img样式后,就统统搞定了,我这里只是设了固定大小,你们可以随意了~

最终效果:

layui14.png

以上就是layui怎么表格中显示图片的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

layui的tips层怎么用

layui如何实现表格单元格合并

layui项目中使用函数layui.define的方法介绍

layui支持wangeditor编辑器的方法

layui中table数据表格隐藏列的方法介绍

layui和bootstrap的区别

layui如何判定密码不一致

layui怎么隐藏表格行

layui input只读属性是什么

layui open更改按钮的颜色

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...