Adaptive width table EasyUi

First contact EasyUi want to implement adaptive table width, the Internet to find a lot of articles, are not achieved, there are friends, but realized themselves do not understand. It may be too simple and too lazy to master all share, and now his own understanding and realization record, I hope you can help yourself to as a rookie the following steps:

The first step, the property table label "fitColumns" is set to "true"

The second step, after the first step of setting, when set to the title td width property, the value of width at this time is set to the number represents the percentage set by the width of, for example, width: 10, represents a width of 10%

code show as below:

<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>