Old Documentation

You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 5.0

CSS Styling

Overview

All elements of Tabulator have CSS classes set to make styling your tables as easy as possible.

Class	Element Description
tabulator	Tabulator container element
tabulator-tableHolder	Contain table and scroll bars
tabulator-table	Contain table rows
tabulator-loader	Ajax loader message holder
tabulator-loader-msg	Ajax loader message
tabulator-loading	Applied to .tabulator-load-msg to style a loading message
tabulator-error	Applied to .tabulator-load-msg to style an error message
tabulator-placeholder	The containing element for the empty table placeholder
tabulator-moving	Applied to rows and columns when they are being moved
tabulator-block-select	Applied to the .tabulator element when the mouse is dragging to prevent accidental text selection
tabulator-moving	Applied to rows and columns when they are being moved
tabulator-movingrow-sending	Applied to table when it is sending a row to another table
tabulator-movingrow-receiving	Applied to table when it is receiving a row from another table

Class	Element Description
tabulator-header	Table header element
tabulator-headers	Hold all column headers inside table header
tabulator-calcs-holder	Hold column calculations row, appears in both header and footer
tabulator-col	Column header (in header row)
tabulator-col-content	Holds the contents for the column header
tabulator-col-title	Holds the text for the column header title
tabulator-col-group	Marks a column header as a group that contains other columns
tabulator-col-group-cols	Holds the column headers contained in a column group
tabulator-handle	Invisible resize handle on the right of each column header
tabulator-title-editor	The input box used for editing titles when the editableTitle option is set
tabulator-header-filter	The containing element for the header filter elements, when the headerFilter option is set
tabulator-sortable	Applied to columns with header sorting enabled
tabulator-frozen	The containing element for all frozen columns
tabulator-frozen-left	Applied to frozen columns on the left edge of the table
tabulator-frozen-right	Applied to frozen columns on the right edge of the table
tabulator-row-resize-handle	Container for frozen rows in the header
tabulator-col-vertical	Applied to a column header to roate the text to a vertical orientation
tabulator-col-vertical-flip	applied to a vertical column header to flip the text round 180 degrees

Class	Element Description
tabulator-row	Row of table
tabulator-row-odd	Odd numbered row
tabulator-row-even	Even numbered row
tabulator-cell	Data cell
tabulator-selectable	Styling for selectable rows
tabulator-unselectable	Styling for unselectable rows
tabulator-selected	Currently selected row
tabulator-editing	Applied to cells being edited and the rows that contain them
tabulator-validation-fail	Applied to cells being edited that have failed validation
tabulator-group	The header element for a row group
tabulator-group-visible	Applied to .tabulator-group when the group is visible
tabulator-group-level-X	Applied to .tabulator-group to denote its level in multi level grouping, the X is replaced with the number of that grouping level
tabulator-calcs	A row that contains column calculations instead of data
tabulator-calcs-top	A column calculations row at the top of a group
tabulator-calcs-bottom	A column calculations row at the bottom of a group
tabulator-row-handle	A cell that is setup as a row handle
tabulator-row-handle-box	containing element for the row handle icon
tabulator-row-handle-bar	one of the bars in the row handle icon
tabulator-row-resize-handle	Invisible resize handle on the top and bottom of each row
tabulator-responsive-collapse	Element to hold collapsed column data in responsive layout mode

Class	Element Description
tabulator-footer	Tabulator footer element
tabulator-paginator	Contains the pagination controls
tabulator-pages	Contains individual page buttons
tabulator-page	Page selection button

The packaged SASS theme files is included in the project with a number of setup variables to make theming a table even easier.

All SCSS file variables use the !default property so you can override them from outside the imported source file.

$backgroundColor:#f00; //change background color of table

@import  "tabulator_simple"; //import table scss

Variable	Default Value	Description
backgroundColor	#888	The background colour of the tabulator element
borderColor	#999	The border colour of the tabulator element
textSize	14	The text size for all text in the tabulator

Variable	Default Value	Description
headerBackgroundColor	#e6e6e6	The background colour for header cells
headerTextColor	#555	The header cells text colour
headerBorderColor	#aaa	The header cells border colour
headerSeperatorColor	#999	The header row bottom border colour
headerMargin	4	The size in pixels for the header cells margin
sortArrowActive	#666	The colour of the column sorter arrow when sorting is active on a column
sortArrowInactive	#bbb	The colour of the column sorter arrow when sorting is not active on a column

Variable	Default Value	Description
rowBackgroundColor	#fff	The background colour of the table rows
rowAltBackgroundColor	#e0e0e0	The background colour of the even numbered table rows
rowBorderColor	#fff	The table row border colour
rowTextColor	#333	The table row text colour
rowHoverBackground	#bbb	The table row background colour when hovered over.
rowSelectedBackground	#9ABCEA	The table row background colour when selected.
rowSelectedBackgroundHover	#769BCC	The table row background colour when selected and hovered over.
editBoxColor	#1D68CD	The border colour of a cell being edited.

Variable	Default Value	Description
footerBackgroundColor	#e6e6e6	The footer background colour
footerTextColor	#555	The footer text colour
footerBorderColor	#aaa	The footer buttons border colour
footerSeperatorColor	#999	The footer element top border colour
footerActiveColor	#d00	The text colour for axtive pagination buttons