New to Kendo UI for Vue? 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

1px

1px

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

0px

0px

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: $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: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.25rem), md: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.5rem), lg: (font-size: 1rem, line-height: 1.5, cell-padding-x: 0.5rem, cell-padding-y: 0.625rem))

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

$kendo-component-bg

#ffffff

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

$kendo-component-text

#212529

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

$kendo-component-border

#dee2e6

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

$kendo-component-header-bg

#f8f9fa

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

$kendo-component-header-text

#212529

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

$kendo-component-header-border

#dee2e6

Description
Border color of table headers.
$kendo-table-header-gradientNull

$kendo-component-header-gradient

null

Description
Gradient of table headers.
$kendo-table-footer-bgColor

$kendo-table-header-bg

#f8f9fa

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

$kendo-table-header-text

#212529

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

$kendo-table-header-border

#dee2e6

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

$kendo-table-header-bg

#f8f9fa

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

$kendo-table-header-text

#212529

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

$kendo-table-header-border

#dee2e6

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

rgba( k-contrast-color( $kendo-table-bg ), .04 )

rgba(0, 0, 0, 0.04)

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

null

null

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

null

null

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

rgba( k-contrast-color( $kendo-table-bg ), .08 )

rgba(0, 0, 0, 0.08)

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

null

null

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

null

null

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-shadowList

inset 0 0 0 2px rgba( $kendo-color-black, .08)

inset 0 0 0 2px rgba(0, 0, 0, 0.08)

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

rgba( $kendo-selected-bg, .25 )

rgba(13, 110, 253, 0.25)

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

$kendo-table-text

#212529

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

null

null

Description
Border color of selected rows in table.

In this article

Not finding the help you need?