前端框架用的layui，发现table的列宽写成百分比没有生效，只能指定宽度，无法做到屏幕自适应。
修改之前代码：
<table class="layui-table" id="table" lay-filter="test"
style="padding-top: 20px;table-layout:fixed;width: 100%">
<thead id="thead">
<tr>
<th lay-data="{field:'testEnv', width:110,align : 'center'}">测试环境</th>
<th lay-data="{field:'user_server', width:277,align : 'center'}">占用服务</th>
<th lay-data="{field:'product', width:110,align : 'center'}">项目编号</th>
<th lay-data="{field:'user', width:110,align : 'center'}">申请人</th>
<th lay-data="{field:'start_date', width:110,align : 'center'}">开始时间</th>
<th lay-data="{field:'end_date', width:110,align : 'center'}">结束时间</th>
<th lay-data="{field:'pro_statud', width:110,align : 'center'}">项目状态</th>
<th lay-data="{field:'operation',width:'125',align : 'center'}">操作</th>
</tr>
</thead>
<tbody id="tbody">
{% for r in records %}
<tr>
<td>
{{ r.env_name }}
{% if r.env_status == 0 %}
<input type="button" class="btn btn-success btn-xs" value="空闲中">
{% elif r.env_status == 1 %}
<input type="button" class="btn btn-danger btn-xs" value="使用中">
{% endif %}
</td>
<td>{{ r.use_server }}</td>
<td>{{ r.env_pro }}</td>
<td>{{ r.env_user }}</td>
<td>{{ r.start_date }}</td>
<td>{{ r.end_date }}</td>
<td>{% if r.env_pro %}
{{ r.get_pro_status_display }}
{% endif %}
</td>
<td>
{% if r.env_pro %}
{% if r.env_user == username %}
{% if r.pro_status == 0 or r.pro_status == 1 %}
<a href="javascript:void(0)"
onclick="openEditModel('{{ r.env_pro }}')">
<img src="/static/svg/pen.svg">修改
</a>
{% endif %}
{% if r.pro_status != 1 %}
<a href="javascript:void(0)"
onclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">
<img src="/static/svg/delete.svg">删除
</a>
{% endif %}
{% endif %}
{% if usr_role == 'admin' or usr_role == 'dev' %}
{% if r.pro_status == 1 %}
<a href="javascript:void(0)"
onclick="openReleaseModel('{{ r.env_pro }}')">
<img src="/static/svg/auditing.svg">释放
</a>
{% endif %}
{% endif %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
image.png
下面是写了个js方法，获取屏幕宽度再动态生成表头信息，代码如下：
<table class="layui-table" id="table" lay-filter="test"
style="padding-top: 20px;table-layout:fixed;width: 100%">
<thead id="thead">
</thead>
<tbody id="tbody">
{% for r in records %}
<tr>
<td>
{{ r.env_name }}
{% if r.env_status == 0 %}
<input type="button" class="btn btn-success btn-xs" value="空闲中">
{% elif r.env_status == 1 %}
<input type="button" class="btn btn-danger btn-xs" value="使用中">
{% endif %}
</td>
<td>{{ r.use_server }}</td>
<td>{{ r.env_pro }}</td>
<td>{{ r.env_user }}</td>
<td>{{ r.start_date }}</td>
<td>{{ r.end_date }}</td>
<td>{% if r.env_pro %}
{{ r.get_pro_status_display }}
{% endif %}
</td>
<td>
{% if r.env_pro %}
{% if r.env_user == username %}
{% if r.pro_status == 0 or r.pro_status == 1 %}
<a href="javascript:void(0)"
onclick="openEditModel('{{ r.env_pro }}')">
<img src="/static/svg/pen.svg">修改
</a>
{% endif %}
{% if r.pro_status != 1 %}
<a href="javascript:void(0)"
onclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">
<img src="/static/svg/delete.svg">删除
</a>
{% endif %}
{% endif %}
{% if usr_role == 'admin' or usr_role == 'dev' %}
{% if r.pro_status == 1 %}
<a href="javascript:void(0)"
onclick="openReleaseModel('{{ r.env_pro }}')">
<img src="/static/svg/auditing.svg">释放
</a>
{% endif %}
{% endif %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
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=
'<th lay-data="{field:\'testEnv\', width:' + w1 + ',align : \'center\'}">' + '测试环境' + '</th>' +
'<th lay-data="{field:\'user_server\', width:' + w2 + ',align : \'center\'}">' + '占用服务' + '</th>' +
'<th lay-data="{field:\'product\', width:' + w1 + ',align : \'center\'}">' + '项目编号' + '</th>' +
'<th lay-data="{field:\'user\', width:' + w1 + ',align : \'center\'}">' + '申请人' + '</th>' +
'<th lay-data="{field:\'start_date\', width:' + w1 + ',align : \'center\'}">' + '开始时间' + '</th>' +
'<th lay-data="{field:\'end_date\', width:' + w1 + ',align : \'center\'}">' + '结束时间' + '</th>' +
'<th lay-data="{field:\'pro_statud\', width:' + w1 + ',align : \'center\'}">' + '项目状态' + '</th>' +
'<th lay-data="{field:\'operation\', width:' + w3 + ',align : \'center\'}">' + '操作' + '</th>' +
thead.appendChild(tr);
}
效果如下：
image.png
网友评论