layui控制table列长度_layui:table列宽屏幕自适应

使用layui的前端框架时,发现table列宽百分比设置无法实现屏幕自适应。通过JS方法动态获取屏幕宽度并调整列宽,实现了表格列宽自适应。详细代码包括JS函数changeWith(),该函数根据屏幕宽度计算各列宽度并更新表头。
摘要由CSDN通过智能技术生成

前端框架用的layui,发现table的列宽写成百分比没有生效,只能指定宽度,无法做到屏幕自适应。

修改之前代码:

style="padding-top: 20px;table-layout:fixed;width: 100%">

测试环境占用服务项目编号申请人开始时间结束时间项目状态操作

{% for r in records %}

{ { r.env_name }}

{% if r.env_status == 0 %}

{% elif r.env_status == 1 %}

{% endif %}

{ { r.use_server }}{ { r.env_pro }}{ { r.env_user }}{ { r.start_date }}{ { r.end_date }}{% if r.env_pro %}

{ { r.get_pro_status_display }}

{% endif %}

{% if r.env_pro %}

{% if r.env_user == username %}

{% if r.pro_status == 0 or r.pro_status == 1 %}

οnclick="openEditModel('{ { r.env_pro }}')">

修改

{% endif %}

{% if r.pro_status != 1 %}

layui table 是基于 layui 框架开发的表格组件,它提供了一种简便且美观的展示数据的方式。在默认情况下,layui table的宽度是固定的,不支持自适应的功能。不过,我们可以通过一些技巧来实现自适应宽度的效果。 一种常见的方法是使用 CSS 来设置表格的样式。我们可以给表格的父容器设置一个固定宽度,然后给每设置一个百分比的宽度。通过设置百分比,表格的宽度会根据父容器的宽度自适应调整。例如: ```html <style> .table-container { width: 100%; /* 设置表格父容器的宽度 */ } .table-container table { width: 100%; /* 设置表格的宽度占满整个父容器 */ } .table-container table td { width: 25%; /* 设置每的宽度为 25% */ } </style> <div class="table-container"> <table class="layui-table"> <colgroup> <col width="25%"> <col width="25%"> <col width="25%"> <col width="25%"> </colgroup> <!-- 表格内容 --> </table> </div> ``` 通过上述代码,我们给表格的父容器设置了一个宽度为100%,然后给每个设置了一个宽度为25%。这样,每的宽度会根据表格父容器的宽度自适应调整。 另外,如果表格中的内容较多,可能会导致自适应时出现内容换行的情况。为了避免这种情况,我们可以使用一些布局样式,例如设置文本溢出隐藏、换行省略号等。 总之,通过 CSS 设置表格的宽度百分比可以实现 layui table自适应宽度的效果,同时可以辅以一些布局样式来优化展示效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值