Out of the box, Backgrid.js generates simple semantic HTML table elements that you can style with pure CSS. This section is only going to briefly describe some of the more important classes, and things that you should be aware of when styling.


This is the class that you should put into any container element that will hold the generated table. By default, it has a fixed maximum height and 100% width with no borders and paddings. It also serves as a positioned element so if you need to absolutely position any elements inside your custom table element classes, you can position them against this container.



This is the class that will be applied to every Backgrid.js generated table. All other Backgrid.js default styles on table elements will only apply to descendents of tables of this class.


Although usually unnecessary, if you want to completely remove all Backgrid.js styles, you can supply a className attribute to the Backgrid.Grid constructor:

.backgrid .*-cell

Every cell class Backgrid.js defines has a CSS class applied to them of the same, but dasherized name. The default styles apply a text-align: left to text cells and text-align: right to numeric and datetime cells.

See the relevant cell classes for details.