使用layui-table时发现会出现如下情况,多一列
2019-11-30_103915.png
原因是 给每一列设置了宽度,加起来还达不到容器的宽度,就自动填充了。
解决办法 给某一列不设置宽度,让其自适应
//可以这样
<table class="layui-table" lay-data="{height:315, url:'/data/type', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'type_name', width:200}">分类名称</th>
<th lay-data="{field:'type_comment', sort: true}">分类描述</th>
</tr>
</thead>
</table>
//也可以这样
table.render({
id: "testReload"
, elem: '#demo'
, url: '/data/user'
, where: {
id: 0
},
cols: [
[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '用户名', width: 120},
{field: 'phone', title: '电话号码', minWidth: 150, edit: 'text'},
{field: 'address', title: '地址', minWidth: 160, edit: 'text'},
{fixed: 'right', width: 165, align: 'center', align: 'center', title: '操作', toolbar: '#barDemo'}
]
]
, skin: 'line' //表格风格
});
//还可以这样
<table id="orderTab" class="layui-table" lay-filter="orderTab" hidden="hidden">
<colgroup>
<col width="100">
<col width="150">
<col width="150">
<col width="150">
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="orderTabBody" >
</tbody>
</table>
网友评论