1. 简介
Layui是一个基于jQuery的前端UI框架，常用于快速构建网站后台界面。其中的表格组件是使用频率非常高的一个组件，但是默认的表格宽度可能并不符合我们的需求，本文将介绍怎么设置layui默认的表格宽度。
2. layui表格组件
在使用layui时，我们通常都会用到它的表格组件。表格组件是layui中非常重要的一部分，用于显示大批量的数据，并提供了分页、排序、筛选等功能。要使用layui的表格组件，需要先引入相关的组件文件。
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
2.1 layui表格的基本使用
使用layui的表格组件非常简单，只需要在HTML中添加一个table元素，再通过JavaScript初始化表格组件即可。下面是一个最简单的layui表格的示例代码：
<table id="demo" lay-filter="demo"></table>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true}
,{field: 'username', title: '用户名', width:120}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:150}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分', width:80, sort: true}
,{field: 'score', title: '评分', width:80, sort: true}
,{field: 'classify', title: '职业', width:100}
,{field: 'wealth', title: '财富', width:135, sort: true}
]]
,data: [{
"id": 10000
,"username": "user-0"
,"sex": "女"
,"city": "城市-0"
,"sign": "签名-0"
,"experience": 255
,"score": 66
,"classify": "作家"
,"wealth": 82830700
}, {
"id": 10001
,"username": "user-1"
,"sex": "男"
,"city": "城市-1"
,"sign": "签名-1"
,"experience": 884
,"score": 87
,"classify": "词人"
,"wealth": 64928690
}]
});
});
</script>
上述代码中，表格的HTML代码如下：
<table id="demo" lay-filter="demo"></table>其中，id是表格的唯一标识符，lay-filter是表格的过滤器，用于处理表格的事件，比如点击行、选中行等。接下来在JavaScript中初始化表格组件：
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true}
,{field: 'username', title: '用户名', width:120}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:150}
,{field: 'sign', title: '签名'}
,{field: 'experience', title: '积分', width:80, sort: true}
,{field: 'score', title: '评分', width:80, sort: true}
,{field: 'classify', title: '职业', width:100}
,{field: 'wealth', title: '财富', width:135, sort: true}
]]
,data: [{
"id": 10000
,"username": "user-0"
,"sex": "女"
,"city": "城市-0"
,"sign": "签名-0"
,"experience": 255
,"score": 66
,"classify": "作家"
,"wealth": 82830700
}, {
"id": 10001
,"username": "user-1"
,"sex": "男"
,"city": "城市-1"
,"sign": "签名-1"
,"experience": 884
,"score": 87
,"classify": "词人"
,"wealth": 64928690
}]
});
});
在上面的JavaScript代码中，使用了layui的table模块的render函数来初始化表格组件，其中主要配置项如下：
elem：表示要渲染的table的DOM元素选择器
cols：定义表头和列属性
data：定义要显示的数据
在cols配置项中，可以定义每一列的宽度（width），当所有列的宽度之和小于table的宽度时，就存在空白区域，如果想去掉这个空白区域，就需要设置表格的宽度与所有列的宽度之和一样。而layui没有提供设置表格宽度的具体配置项，需要通过CSS来实现。
3. 设置layui默认的表格宽度
为了能让所有列填满整个表格，我们可以在CSS中设置表格的宽度和每一列的宽度。具体方法如下：
3.1 设置表格的宽度
设置表格的宽度非常简单，只需要在CSS中设置table元素的width即可，下面是示例代码：
table {
width: 100%;
}
这样设置后，表格的宽度就会占满整个父容器的宽度，不会存在空白区域了。
3.2 设置每一列的宽度
要设置每一列的宽度，需要使用Layui提供的一些CSS类。在cols配置项中，如果想要设置某一列的宽度，可以给对应的th元素添加lay-data="{width: 宽度}"属性，其中宽度可以设置成固定值，也可以设置百分比。
例如，要设置第一列的宽度为10%，第二列的宽度为20%，第三列的宽度为30%，其余列的宽度平均分配，可以使用下面的CSS代码实现：
th[data-field="id"] {
width: 10%;
}
th[data-field="username"] {
width: 20%;
}
th[data-field="sex"] {
width: 30%;
}
th:not([data-field="id"]):not([data-field="username"]):not([data-field="sex"]) {
width: calc(40% / 6);
}
上述代码中，使用选择器th[data-field="id"]、th[data-field="username"]、th[data-field="sex"]分别选择第一列、第二列、第三列，使用:not选择器选择其他列，然后分别设置宽度。需要注意的是，由于表格的边框和padding也会占用一定的宽度，因此所有列的宽度之和应该小于等于100%。如果某一列的内容过长，会导致该列的宽度无法满足要求，这时可以给这一列增加一个title属性，当鼠标悬停在该列时会弹出该列的完整内容。
4. 总结
本文介绍了怎么设置layui默认的表格宽度，通过设置表格的宽度和每一列的宽度，可以让所有列填满整个表格，并且避免存在空白区域。无论在使用layui时还是其他前端框架时，控制表格宽度都是非常重要的一个问题。