Fancy responsive stuff

Make the window smaller to see how the table transforms.

You can right-click on this page and choose "View page source" to see the HTML code.

I added data-header attributes to each td element. The CSS uses that value when displaying the table on smaller screens.

You can click on "responsive_table.css" in the stylesheet link in the HTML to view the CSS code.

KC Royals Playoff Appearances
Year Record Result
1976 90-72 AL West Champions
1977 102-60 AL West Champions
1978 92-70 AL West Champions
1980 97-65 AL Champions
1981 50-53 Second half AL West winner (weird strike year thing)
1984 84-78 AL West Champions
1985 91-71 World Series Champions
2014 89-73 AL Champions
2015 95-67 World Series Champions
2045 97-65 World Series Champions
Source: baseball-reference.com

Back to practice #9 example.