Create a rule that displays the table, thead, tbody, tr$,$ td$,$ and th elements as block elements.

We don't want the rows inside the thead element to show in mobile view because we will replace these a little later. However, we can't just hide the rows because we need to have them for accessibility reasons. So instead of just hiding them, we will position them off$-$screen. Create a rule for any rows inside the thead that positions them using absolute positioning, and setting the left and top to $-9999$ pixels.

Now, in order to help distinguish the data in each row, we want to add a border. Create a rule for any row element that adds a $1$ pixel solid border using the color #aaaaaa.

Because we don't have the table header anymore, we will add "headers" to each cell. To make space for the "header", we need to add left padding to each data cell. Create a rule for any tabe cell that

adds $35\%$ left padding,

allows the text to wrap by setting the word$-$break property to break$-$work,

removes the border,

adds a $1$ pixel solid border using the color #cccccc to the bottom,

and positions the element using relative positioning.

To add the "header" to each data cell, we will use the before pseudo$-$element. Create a rule for the before pseudo$-$element for any table cell that positions the element using absolute positioning with the left set to $5$ pixels and the top to $50\%$ and transforms the element moving it $-50\%$ on its $"$Y$"$ axis, and sets the text to display as bold.

Finally, we need to set the content for each before pseudo$-$element separately. Create a rule for each table cell that sets the contentproperty using the following:

td:nth$-$of$-$type$(1)$:before to First Name

td:nth$-$of$-$type$(2)$:before to Last Name

td:nth$-$of$-$type$(3)$:before to Grad Year

td:nth$-$of$-$type$(4)$:before to Email

td:nth$-$of$-$type$(5)$:before to Location