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.
 |
My document |
 |
My folder |
 |
My text file |
Add the secondary class .smallTable to reduce the size of the table.
|
My document |
|
My folder |
|
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.
|
My document |
|
My folder |
|
My text file |
Add the secondary class .smallTable to reduce the size of the table.
|
My document |
|
My folder |
|
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.
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 | ||
 |
Features list | Project | Focus | |
 |
Nuxeo_Features.pdf | Project | Focus column | |
Width classes
The width classes are a set of classes with a width in percent, to make your cells have a specific distribution.