# Column Widths

By default, the Kendo UI for Vue TreeList is responsive and has no fixed width—the component behaves like an HTML table and expands to the width of the parent element.

## Getting Started

By default, the TreeList will equally divide its width between its columns and it will responsively expand or shrink them when the width of its parent container is changed.

* To set the column widths of the TreeList, use the [`width`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#width) property when defining its columns.
* To set the `width` of the TreeList `wrapper` element, use the TreeList `style` property.
* To set the width and any other property of the underlying HTML table, use the `tableProps` property of the TreeList which allows you to quickly resize the TreeList in the desired units.

## Setting Column Widths in Percentage

To set the TreeList column widths in percentage, set the width values through the [`width`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#width) property when defining its columns. The width of the `wrapper` and `table` HTML block elements of the TreeList defaults to `auto` and the browser will expand them according to the available space. If your project requires you to limit the TreeList width, set the wrapper width through the TreeList [`style`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#wrapperstyle) property.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treelist/column-width-percentage/source.txt)

## Setting Fixed Column Width

To set the TreeList column widths in pixels, set the width values through the [`width`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#width) property of the `TreeListColumnProps`, and the `wrapper` and `table` HTML widths which will be the sum of the widths of all columns.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/treelist/column-width-fixed/source.txt)

## Suggested Links

* [API Reference of the style TreeList Prop](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#wrapperstyle)
* [API Reference of the tableProps TreeList Prop](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#tableprops)
* [API Reference of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops)