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) Angular 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.
Change Theme
Theme
Loading ...