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

Customizing Table

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber1px1px
Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber1px1px
Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber1px1px
Description
The width of horizontal border of table cells.
$kendo-table-header-font-weightNullnullnull
Description
Font weight of the table header cells.
$kendo-table-sizesMap( sm: ( font-size: $kendo-font-size-sm, line-height: $kendo-line-height-sm, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y, group-row-padding-x: 0, group-row-padding-y: $kendo-table-sm-cell-padding-y, group-label-padding-x: k-spacing(2), group-label-padding-y: k-spacing(1), group-label-font-size: .875em ), md: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-md-cell-padding-x, cell-padding-y: $kendo-table-md-cell-padding-y, group-row-padding-x: 0, group-row-padding-y: $kendo-table-md-cell-padding-y, group-label-padding-x: k-spacing(2), group-label-padding-y: k-spacing(1), group-label-font-size: .875em ), lg: ( font-size: $kendo-font-size-lg, line-height: $kendo-line-height-lg, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y, group-row-padding-x: 0, group-row-padding-y: $kendo-table-lg-cell-padding-y, group-label-padding-x: k-spacing(2), group-label-padding-y: k-spacing(1), group-label-font-size: .875em ) )(sm: (font-size: 0.875rem, line-height: 1.25, cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), group-row-padding-x: 0, group-row-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-padding-x: var(--kendo-spacing-2, 0.5rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: 0.875em), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), group-row-padding-x: 0, group-row-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-padding-x: var(--kendo-spacing-2, 0.5rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: 0.875em), lg: (font-size: 1.25rem, line-height: 1.75, cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), group-row-padding-x: 0, group-row-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-padding-x: var(--kendo-spacing-2, 0.5rem), group-label-padding-y: var(--kendo-spacing-1, 0.25rem), group-label-font-size: 0.875em))
Description
The sizes of the table.

In this article

Not finding the help you need?