HTML: Responsive table

Last update: 27 May 23:20

A long time ago, in a galaxy far, far away, a Hexlet employee made a table describing the professions that are presented on the site

Professions table

A new task has appeared: the table needs to be adapted for mobile devices, but retain the HTML markup. This is the most common type of task and there are various reasons for this:

  • The component is already used on many pages, and its template is not in a separate file
  • The component has the correct markup in terms of semantics and there is no need to redo it using other tags

The second option is exactly what will not allow us to change the layout. Customize the table using the following images and descriptions:

Table with the maximum viewport width of 649px

Adaptive CSS Table

  • The table header is hidden
  • All cells have no border
  • Cells line up one under the other
  • Each cell has a name that duplicates the name of the columns in the table header. The name is added according to the pattern: Name:. There is a space after the colon
  • Name color is #7a91aa and bold style is used

To implement the last point, you will need the attr() function, which has already been used in previous courses.

Prefix the cell content with the data from the data-th attribute. You can also concatenate a function and a string, for example: content: attr(data-attr) " Hello ". Note that whitespace characters are included in the output.

Table with the maximum viewport width of 449px

Adaptive CSS table

  • All data is centered
  • Colon removed from cell name
  • Cell title font-size: 0.8rem


  • You will need to use pseudo-elements
  • Use the display property to make the element block-level. The value block is used for this.

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory