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

Customizing Table

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-table-border-widthNumber

1px

1px

Description
The width of the table border.
$kendo-table-cell-vertical-border-widthNumber

$grid-cell-vertical-border-width

1px

Description
The width of vertical border of table cells.
$kendo-table-cell-horizontal-border-widthNumber

$grid-cell-horizontal-border-width

1px

Description
The width of horizontal border of table cells.
$kendo-table-font-sizeNull

null

null

Description
The font size of the table if no size is specified.
$kendo-table-line-heightNull

null

null

Description
The line-height of the table if no size is specified.
$kendo-table-cell-padding-xNull

null

null

Description
The horizontal padding of the cells in the table if no size is specified.
$kendo-table-cell-padding-yNull

null

null

Description
The vertical padding of the cells in the table if no size is specified.
$kendo-table-sizesMap

( sm: ( font-size: $font-size-md, line-height: ( 20 / 14 ), cell-padding-x: map-get( $spacing, 4 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ), md: ( font-size: $font-size-md, line-height: ( 20 / 14 ), cell-padding-x: map-get( $spacing, 4 ), cell-padding-y: map-get( $spacing, 2 ) ), lg: ( font-size: $font-size-md, line-height: ( 20 / 14 ), cell-padding-x: map-get( $spacing, 4 ), cell-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin ) ) )

(sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 16px, cell-padding-y: 10px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 16px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 16px, cell-padding-y: 10px))

Description
The sizes of the table.
$kendo-table-bgColor

$grid-bg

white

Description
Background color of tables.
$kendo-table-textColor

$grid-text

rgba(0, 0, 0, 0.87)

Description
Text color of tables.
$kendo-table-borderColor

$grid-border

rgba(0, 0, 0, 0.12)

Description
Border color of tables.
$kendo-table-header-bgColor

$grid-header-bg

white

Description
Background color of table headers.
$kendo-table-header-textColor

$grid-header-text

rgba(0, 0, 0, 0.54)

Description
Text color of table headers.
$kendo-table-header-borderColor

$grid-header-border

rgba(0, 0, 0, 0.12)

Description
Border color of table headers.
$kendo-table-footer-bgColor

$grid-footer-bg

white

Description
Background color of table footers.
$kendo-table-footer-textColor

$grid-footer-text

rgba(0, 0, 0, 0.54)

Description
Text color of table footers.
$kendo-table-footer-borderColor

$grid-footer-border

rgba(0, 0, 0, 0.12)

Description
Border color of table footers.
$kendo-table-group-row-bgColor

$kendo-table-header-bg

white

Description
Background color of group rows in table.
$kendo-table-group-row-textColor

$kendo-table-header-text

rgba(0, 0, 0, 0.54)

Description
Text color of group rows in table.
$kendo-table-group-row-borderColor

$kendo-table-header-border

rgba(0, 0, 0, 0.12)

Description
Border color of group rows in table.
$kendo-table-alt-row-bgColor

$grid-alt-bg

transparent

Description
Background color of alternating rows in table.
$kendo-table-alt-row-textNull

$grid-alt-text

null

Description
Text color of alternating rows in table.
$kendo-table-alt-row-borderNull

$grid-alt-border

null

Description
Border color of alternating rows in table.
$kendo-table-hover-bgColor

$grid-hovered-bg

rgba(0, 0, 0, 0.07)

Description
Background color of hovered rows in table.
$kendo-table-hover-textNull

$grid-hovered-text

null

Description
Text color of hovered rows in table.
$kendo-table-hover-borderColor

$grid-hovered-border

rgba(0, 0, 0, 0.12)

Description
Border color of hovered rows in table.
$kendo-table-focus-bgNull

null

null

Description
Background color of focused rows in table.
$kendo-table-focus-textNull

null

null

Description
Text color of focused rows in table.
$kendo-table-focus-borderNull

null

null

Description
Border color of focused rows in table.
$kendo-table-focus-shadowNull

$grid-focused-shadow

null

Description
Box shadow of focused rows in table.
$kendo-table-selected-bgColor

$grid-selected-bg

rgba(0, 0, 0, 0.04)

Description
Background color of selected rows in table.
$kendo-table-selected-textNull

$grid-selected-text

null

Description
Text color of selected rows in table.
$kendo-table-selected-borderColor

$grid-selected-border

rgba(0, 0, 0, 0.12)

Description
Border color of selected rows in table.

In this article

Not finding the help you need?