layui table column width displayed as a percentage

   var layer = layui.layer, form = layui.form, table = layui.table;
            var $ = layui.$;
            /*select gysmc,zyzw ,xm ,sjhm ,bgshm ,emilyx ,
            zgsrgzwsj ,zggsgl ,cast(gysxxid as int) as gysxxid, pc,
             gysryxxMdataID as ID,sjbs from gysryxxMdata*/
            var tableInit = table.render({
                elem: '#tbgysplay'
                , method: 'post'
                , data: jsonData
                , height: "auto"
                , id: "tbgysplay"
                , text: {none: '暂无相关数据'}
                , toolbar: "#toolbarplan"
                , cols: [[
                    {type: "checkbox", fixed: "left", width: 50}
                    , {
                    , {field: "ID", title: "ID", align: "left", hide: true}
                    , {field: "action", title: "action", align: "left", hide: true}
                    , {field: "sjbs", title: "sjbs", align: "left", hide: true}
                    , {field: "供应商名称", title: "Supplier name ", width: '20% ', align = left:" left "} 
                    , {Field:" The main product type ", title:" primary product type ", width: '20%',
                        field: "number", title: " serial number", width: '%. 5', align = left: "left", Templet: function (Data) { 
                            return data.LAY_INDEX 
                        } 
                    } 
                    , {Field: "where the provinces", title: " where the provinces ", width: '15% ', align = left:' left '} 
                    , { 
                        Field,:" PSA planning time ", title:" PSA planning time ", width: '20%', align: 'left', edit: 'SELECT', 
                        Templet: function (D) { 
                            return ' < INPUT type = "text" name = "rzrq" verify lay-verify="verify" value="' + (d.rzrq || '') + '"placeholder = "Select time" Readonly = "Readonly" class = "layui-the INPUT layui-the INPUT-DATE" style = "text-align = left: Center" /> ';
                        }
                    } 
                    , {Field,: "PSA project leader", title: " PSA project leader ", width: '20% ', align = left:' left ', Edit:' text '} 
                ]] 
                , DONE: function () {// when the data is rendered after the callback executed 
                    // date control 
                    $ ( "DATE-.layui-INPUT") each (function (I) {. 
                        layui.laydate.render ({ 
                            elem: the this, 
                            the format: "the MM-dd-YYYY",
                            done: function (value, date) { 
                                IF (RES && res.data [I]) { 
                                    $ .extend (res.data [I], { 'rzrq':value})
                                } 
                            } 
                        }); 
                    }); 
                    layer.closeAll (); 
                } 

            }); 
            // double click editing row 
            table.on ( 'edit (tbgysplay)' , function (obj) { 
                // test format phone office phone mailbox 
            });