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 valueblock
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.