Pseudo Selectors

Technologies

set max-width as 40em to let the design responsive.
add "not(.sr-only)" on the property "span" to exclude the class "sr-only" or add "!important" on all properties of "span[class~="sr-only"]"
set "border-collapse: collapse" to allow the cell borders to be combined into a single border
set a width (100vw) allow the elements to shrink to the container (or to fill the viewport) and set a max-width and min-width allow them to fix the width on it.
the :nth-of-type() pseudo-selector is used to target specific elements based on their order among siblings of the same type.
the :hover selector is used to select elements when you mouse over them.