使用layui-table時發(fā)現(xiàn)會出現(xiàn)如下情況英遭,多一列
原因是 給每一列設置了寬度,加起來還達不到容器的寬度企蹭,就自動填充了白筹。
解決辦法 給某一列不設置寬度,讓其自適應
//可以這樣
<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>商品數(shù)量</th>
<th>商品單價</th>
<th>小計</th>
<th>操作</th>
</tr>
</thead>
<tbody id="orderTabBody" >
</tbody>
</table>