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

前端框架用的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 %}

οnclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">

删除

{% endif %}

{% endif %}

{% if usr_role == 'admin' or usr_role == 'dev' %}

{% if r.pro_status == 1 %}

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

释放

{% endif %}

{% endif %}

{% endif %}

{% endfor %}

image.png

下面是写了个js方法，获取屏幕宽度再动态生成表头信息，代码如下：

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 %}

οnclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">

删除

{% endif %}

{% endif %}

{% if usr_role == 'admin' or usr_role == 'dev' %}

{% if r.pro_status == 1 %}

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

释放

{% endif %}

{% endif %}

{% endif %}

{% endfor %}

js：

$(function () {

changeWith();

});

//列表宽度自适应调整

function changeWith() {

var screenWith = document.body.clientWidth;

var w0 = (screenWith-44) / 9;

var w1 = 0.9 * w0;

var w2 = 2.5 * w0;

var w3 = 1.1 * w0;

var thead = document.getElementById('thead');

var tr = document.createElement("tr");

tr.innerHTML=

'

' + '测试环境' + '' +

'

' + '占用服务' + '' +

'

' + '项目编号' + '' +

'

' + '申请人' + '' +

'

' + '开始时间' + '' +

'

' + '结束时间' + '' +

'

' + '项目状态' + '' +

'

' + '操作' + '' +

thead.appendChild(tr);

}

效果如下：

image.png