Tables

Tables are commonly used in the platform to display tabular data: in content views, widgets, even in gadgets in your dashboard. Tables are also used to display forms, but are not visible in this case. Here is a list of the available CSS classes, with their characteristics.

.dataTable

A recent addition, since you may need some tables in your widgets. 100% width, with a border all around, and designed to list a lot of data in a small space.

Example of a table with a header.

Class Use
.dataTable Simple small table

Example of a table without a header.

File My document
File My folder
File My text file

Add the secondary class .smallTable to reduce the size of the table.

File My document
File My folder
File My text file

.dataTableLine

Like the .dataTable, this class is made for small boxes, to list many elements while keeping it easy to read. No vertical borders, 100% width, and bold characters in header cells.

Example of a table with a header.

Class Use
.dataTableLine To display a listing

Example of a table without a header.

File My document
File My folder
File My text file

Add the secondary class .smallTable to reduce the size of the table.

File My document
File My folder
File My text file

Invisible tables

Invisible tables are generally used in forms to structure the content, align labels and fields, without needing to be seen. A .labelColumn is used for the label cells, a .fieldColumn for fields.

  • .dataInput is used for forms that constitute the main body of a page: a lot of space between fields,
  • .dataTableNoBorder is used for the edition of specific information, in a small space: space between rows is reduced.
Table class .dataInput
Checkbox
Table class .dataTableNoBorder
Select a value

Design a table

A list of class is available to help you design your tables. Wether you want small columns for icons or checkboxes, or tables with fixed column width, you can constrain your tables for a great display in your layout. You can design your table by using specific class names, related to the content, or by using width classes, no matter what kind of content it will display.

Content classes

The content classes are a set of classes, named from their role, to make your cells have the right behavior.

Note that the .labelColumn class has different behaviors in forms and tables: in forms, content is right-aligned, while it is aligned on the left in data tables.

Title State Focus
.iconColumn for the 2 first small columns .boldColumn .focusColumn
Note Features list Project Focus
Note Nuxeo_Features.pdf Project Focus column
Label Field
.labelColumn .fieldColumn
City Paris
Country France

Width classes

The width classes are a set of classes with a width in percent, to make your cells have a specific distribution.

.tenPercent .ninetyPercent
.twentyPercent .eightyPercent
.thirtyPercent .seventyPercent
.tenPercent .sixtyPercent .fortyPercent
.tenPercent .fiftyPercent .twentyPercent .twentyPercent