EasyUi 表格自适应宽度

时间：2022-06-07 15:53:24

第一次接触EasyUi想要实现表格宽度自适应，网上找了好多文章，都没有实现，有网友实现了可是自己看不懂。可能是太简单高手都懒得分享，现在把自己的理解和实现记录一下，希望可以帮到向自己一样的菜鸟，步骤如下：

第一步，把table标签的属性“fitColumns”设置为“true”

第二步，经过第一步的设置后，此时给标题的td设置width属性，width的值此时设置为数字代表的就是宽度按百分比来设置，例如width:10，表示宽度为10%

代码如下：

<table class="easyui-datagrid" style="width:100%;"

            data-options="singleSelect:true,collapsible:true,url:'demo/datagrid/datagrid_data1.json',method:'get',fitColumns:true">

        <thead>

            <tr>

                <th data-options="field:'itemid',width:10">Item ID</th>

                <th data-options="field:'productid',width:20">Product</th>

                <th data-options="field:'listprice',width:10,align:'right'">List Price</th>

                <th data-options="field:'unitcost',width:10,align:'right'">Unit Cost</th>

                <th data-options="field:'attr1',width:40">Attribute</th>

                <th data-options="field:'status',width:10,align:'center'">Status</th>

            </tr>

        </thead>

    </table>

相关文章