Basic usage
Use class -row
. Designates the element as a row of columns in the grid layout.
For mobile add modifier _responsive_
. This will set for table font-size: 0.9em
. And don't forget to hide minor cells on mobile with maxmertkit responsive utilities.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Horizontal border
Use modifier class _horizontal_
to add horizontal dividers.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Vertical border
Use modifier class _vertical_
to add vertical dividers.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Combine modifiers
Combine modifiers _vertical_
and _horizontal_
to add inside dividers.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Bordered
Use modifier class _bordered_
for borders on all sides of the table and cells.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Use themes
Use theme classes (you can include any theme, so themes class names can be different) -primary-
, -error-
, -success-
with .-table
to set theme.
# |
First Name |
Last Name |
Username |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |