column width percent

I am trying to use percentages for my column widths. The end result of this code is that each column has a width of what looks like 200%, not 20%, of the document.

What am I doing wrong?

Thanks!

<style>
    #schedule { width: 100%; height: 100%; border-bottom: 0px}
    #schedule .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}

    #schedule .aw-alternate-even {background: #fff;}
    #schedule .aw-alternate-odd {background: #eee;}

    #schedule .aw-mouseover-row {background: #ccc;}
    #schedule2 .aw-mousedown-row {background: #999;}

    #schedule .aw-column-0 {width: 20%; border-right: 1px dotted #ccc;}
    #schedule .aw-column-1 {width: 20%; border-right: 1px dotted #ccc;text-align: right}
    #schedule .aw-column-2 {width: 20%; border-right: 1px dotted #ccc;text-align: right}
    #schedule .aw-column-3 {width: 20%; border-right: 1px dotted #ccc;text-align: right}
    #schedule .aw-column-4 {width: 20%; border-right: 1px dotted #ccc;text-align: right}

    #schedule .aw-grid-headers {color: blue}

    #schedule .active-scroll-bars{ overflow: hidden }

    #schedule .aw-mouseover-header {color: red;}
    #schedule .aw-mousedown-header {color: yellow;}

</style>

<script>

    var myData = [
        ["09:00", "Black, Jack", "Bartfast, Slarti", "Office Visit", "<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        ["09:15", "Black, Jack", "Bartfast, Slarti", "Office Visit", "<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        ["09:30", "Black, Jack", "Bartfast, Slarti", "Office Visit", "<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        ["09:45", "Black, Jack", "Bartfast, Slarti", "Office Visit", "<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        ["10:00", "Black, Jack", "Bartfast, Slarti", "Office Visit", "<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        ["10:15", "Black, Jack", "Bartfast, Slarti", "Office Visit", "<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
    ];

    var myHeaders = ["Time", "Patient", "Provider", "Visit Type", "Status"];


    var obj = new AW.UI.Grid;

    obj.setCellData(myData);
    obj.setHeaderText(myHeaders);

    obj.setColumnCount(5);
    obj.setRowCount(6);

    var money = new AW.Formats.Number;
    var string = new AW.Formats.String;
    var time = new AW.Formats.Date;
    time.setTextFormat("hh:mm");
    money.setTextFormat("$ #,###.##");
    var number = new AW.Formats.Number;

    obj.setCellFormat([string,string,string,string,string]);

    obj.setCellEditable(false);
    obj.setId("schedule"); // necessary for CSS rules

    document.write(obj);


</script>

Column width in % is not supported in the current version. However there is one trick which might work - setting row width to 1000% to avoid wrapping the cells and setting cell widths in % but 1/10 of 'normal' size -

<style>

    #schedule .aw-grid-headers,
    #schedule .aw-grid-footers,
    #schedule .aw-grid-view { width: 1000% }

    #schedule .aw-grid-row {width: 100%}
    #schedule .aw-column-space {width: 10%}


#schedule { width: 100%; height: 100%; border-bottom: 0px}
#schedule .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}

#schedule .aw-alternate-even {background: #fff;}
#schedule .aw-alternate-odd {background: #eee;}

#schedule .aw-mouseover-row {background: #ccc;}
#schedule2 .aw-mousedown-row {background: #999;}

#schedule .aw-column-0 {width: 2%; border-right: 1px dotted #ccc;}
#schedule .aw-column-1 {width: 2%; border-right: 1px dotted #ccc;text-align: right}
#schedule .aw-column-2 {width: 2%; border-right: 1px dotted #ccc;text-align: right}
#schedule .aw-column-3 {width: 2%; border-right: 1px dotted #ccc;text-align: right}
#schedule .aw-column-4 {width: 2%; border-right: 1px dotted #ccc;text-align: right}

#schedule .aw-grid-headers {color: blue}

#schedule .active-scroll-bars{ overflow: hidden }

#schedule .aw-mouseover-header {color: red;}
#schedule .aw-mousedown-header {color: yellow;}
</style>