New to Kendo UI for Angular? Start a free 30-day trial

Column Widths

With regard to the widths of its columns, the scrollable (default) Grid typically behaves as any regular HTML table with a fixed layout.

  • When all column widths are explicitly set and the cumulative column width is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected.
  • When all column widths are explicitly set and the cumulative column width is less than the available Grid width, the remaining width is distributed evenly between all columns.
  • When only some column widths are set and the cumulative width of the columns with set widths is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected. Columns with no set width are invisible as their width is 0.
  • When only some column widths are set and the cumulative width of columns with set widths is less than the available Grid width, the widths of the columns with a set width are respected and the remaining width is distributed evenly between the other columns.
  • When no column widths are set, the available width is distributed evenly between all Grid columns.
  • When the Grid has at least one locked column, the widths of the Grid columns behave like a resizable Grid.

The following example demonstrates how to explicitly set all column widths in the Grid.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?