Responsive tables with CSS

Tables are a design pattern for displaying large amounts of data in rows and columns, making them a highly visual and efficient way to display data. From the beginning, the web supports the visualization of data in tabular format. HTML tables present tabular data in a semantically and structurally appropriate way. However, the default styles in HTML tables are not ideal for viewing on mobile devices.

As an example I show you this column table with the following styles:

On mobile devices, where the available width is much smaller, the display of the table data implies the reduction of the font size. In cases where the table contains a significant number of columns, reading the data becomes considerably difficult. Obviously, we can resort to making a "zoom" on the screen itself, but this should not be the solution.

Solution 1: Apply Horizontal Scroll

One of the options is to apply a horizontal scroll that is visible in those cases where the available width is less than the total width of the table :

Solution 2: Add styles to make the table responsive

To achieve styles that present the fields of each record in the table vertically and with 100% of the available width, we must add the following attribute "data-cell" (the name can be similar) to all the fields of each row of the board. This attribute must contain the name of the field to which the data belongs. The following code is an example for one of the records in the table:

The "before" Css pseudo-element allows us to access the attributes of each table element. Taking advantage of the fact that we have included the "data-cell" attribute with the name of the field in each record, we can add styles to the elements of the table for viewing on mobile phones:

With this, the result of the visualization of the table for mobiles is the following:

Responsive layout data tables only with Css. Using the pseudo-element: "before"