New to Kendo UI for Angular? 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-widthNumber0px0px
Description
The width of horizontal border of table cells.
$kendo-table-font-sizeNullnullnull
Description
The font size of the table if no size is specified.
$kendo-table-line-heightNullnullnull
Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-xNullnullnull
Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-yNullnullnull
Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizesMap( sm: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-sm-cell-padding-x, cell-padding-y: $kendo-table-sm-cell-padding-y ), 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 ), lg: ( font-size: $kendo-font-size-md, line-height: $kendo-line-height-md, cell-padding-x: $kendo-table-lg-cell-padding-x, cell-padding-y: $kendo-table-lg-cell-padding-y ) )(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px))
Description
The sizes of the table.
$kendo-table-bgColor$kendo-component-bg#ffffff
Description
Background color of tables.
$kendo-table-textColor$kendo-component-text#424242
Description
Text color of tables.
$kendo-table-borderColor$kendo-component-borderrgba(0, 0, 0, 0.08)
Description
Border color of tables.
$kendo-table-header-bgColor$kendo-component-header-bg#fafafa
Description
Background color of table headers.
$kendo-table-header-textColor$kendo-component-header-text#424242
Description
Text color of table headers.
$kendo-table-header-borderColor$kendo-component-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of table headers.
$kendo-table-header-gradientNull$kendo-component-header-gradientnull
Description
Gradient of table headers.
$kendo-table-footer-bgColor$kendo-table-header-bg#fafafa
Description
Background color of table footers.
$kendo-table-footer-textColor$kendo-table-header-text#424242
Description
Text color of table footers.
$kendo-table-footer-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of table footers.
$kendo-table-group-row-bgColor$kendo-table-header-bg#fafafa
Description
Background color of group rows in table.
$kendo-table-group-row-textColor$kendo-table-header-text#424242
Description
Text color of group rows in table.
$kendo-table-group-row-borderColor$kendo-table-header-borderrgba(0, 0, 0, 0.08)
Description
Border color of group rows in table.
$kendo-table-alt-row-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))rgba(0, 0, 0, 0.04)
Description
Background color of alternating rows in table.
$kendo-table-alt-row-textNullnullnull
Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderNullnullnull
Description
Border color of alternating rows in table.
$kendo-table-hover-bgColorif($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))#ededed
Description
Background color of hovered rows in table.
$kendo-table-hover-textNullnullnull
Description
Text color of hovered rows in table.
$kendo-table-hover-borderNullnullnull
Description
Border color of hovered rows in table.
$kendo-table-focus-bgNullnullnull
Description
Background color of focused rows in table.
$kendo-table-focus-textNullnullnull
Description
Text color of focused rows in table.
$kendo-table-focus-borderNullnullnull
Description
Border color of focused rows in table.
$kendo-table-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 2px rgba(0, 0, 0, 0.12)
Description
Box shadow of focused rows in table.
$kendo-table-selected-bgColorif($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))rgba(255, 99, 88, 0.25)
Description
Background color of selected rows in table.
$kendo-table-selected-textNullnullnull
Description
Text color of selected rows in table.
$kendo-table-selected-borderNullnullnull
Description
Border color of selected rows in table.

In this article

Not finding the help you need?