Sorting a Kendo Grid changes its columns widths

Question

I've got a Kendo Grid like this:

    <%: Html.Kendo()
           ...
            .Pageable()                 
            .Columns(c => {
                c.Bound(x => x.ProductId).Width(80);
                c.Bound(x => x.ProductCode).Width(40);
                c.Bound(x => x.ProductName).Width(80);
                c.Bound(x => x.Created).Format("{0:yyyy-MM-dd}").Width(70);
                c.Bound(x => x.CreatedBy).Width(80);
            })
            .Sortable()
            .Selectable()               
            ...

When you click on a column header an up or down arrow appears to indicate sorting. So far so well, but the sort arrow makes the column expand its width which is very annoying. I want to avoid the columns changing their width, how do you do that?

Answer 1

Adding css rule to the grid's table: table-layout:fixed should resolve your problem.