How to customize grid columns width using only css

asked 2016-08-07 10:45:26 +0800

alex3ee
13 ● 3

updated 2016-08-07 20:14:37 +0800

How to customize grid columns width using only .css

• Column width has applied to grid header. But column width not applied to grid body:

<?page id="layout" docType="html" contentType="text/html;charset=UTF-8" title="how to customize grid column widths with css" ?>
<zk>
<style>
  .column1 { width: 10em; }
  .column2 { width: 15em; }
  .column3 { width: 20em; }
</style>

<grid sclass="whole_table">
<auxhead>
  <auxheader sclass="column1"/>
  <auxheader sclass="column2"><textbox value="" width="90%"/></auxheader>
  <auxheader sclass="column3"><textbox value="" width="90%"/></auxheader>
</auxhead>
<columns sizable="true" menupopup="auto">
  <column sclass="column1" label="column1" />
  <column sclass="column2" label="column2" />
  <column sclass="column3" label="column3" />
</columns>
<rows>
  <row forEach="1,2,3">
    <label value="111111111111111" sclass="column1"/>
    <label value="222222222222222" sclass="column2"/>
    <label value="333333333333333" sclass="column3"/>
  </row>
</rows>
</grid>
</zk>

Screenshot:
http:// s8.postimg.org/52q6vlu1x/customizecolumnwidthwithcss.png

Want:
- Customize grid column widths using only css (without need to set up width in program code with tag: width="10em")