Go to homepage

Projects /

Table

Data tables used to organize and display information in rows and columns.

View Demo

Dependencies

Compatible CSS frameworks:

How to

Tables are used to list information from a data set in a two-dimensional grid so that the data correlation is understandable by the user.

Responsiveness #

By default, each row is displayed as a separate block (layout optimized for smaller screens). To edit this behavior, you can apply the .table--expanded class to the .table element. The .table--expanded modifier is used to display the standard table layout (rows + columns).

Optionally, you can use one of the [email protected]{breakpoint} classes to edit the layout at a specific breakpoint (example):

Column Width #

To set a fixed width for a column, apply one of the width utility classes to the .table__cell element. Because of the implicit size correlation among cells belonging to the same column (they share the same size), you can apply the width class only to one .table__cell element. All the other cells in the same column will adapt accordingly.

Please be aware the width utility classes have effect only when the .table--expanded modifier is applied to the .table element.

Other framework utility classes that help you modify columns width are the .min-width-{size} and ws-nowrap utility classes.

Alignment #

To modify the content alignment within a cell, you can apply the following utility classes to the .table__cell element:

  • .text-left → left horizontal alignment
  • .text-center → center horizontal alignment
  • .text-right → right horizontal alignment
  • .align-top → top vertical alignment
  • .align-middle → middle vertical alignment
  • .align-bottom → bottom vertical alignment

To make the header sticky while scrolling the table content, apply the .table__header--sticky class to the .table__header element (example).

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.