HTML: Responsive table

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

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

• 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

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

Hints

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