Responsive Tables in HTML<\/h2>\n\n\n\n
Tabular data should be structured in one way: with the HTML table elements. This is the semantically correct approach, but it can give us some serious stylistic challenges. Tables are notoriously inflexible where responsive layouts are concerned.<\/p>\n\n\n\n
There are several solutions to the issue: scrollable containers wrapping the table, collapsible cells, using different (less semantic) markup. We\u2019re going to use Flexbox to display our table cells in a grid layout on smaller screens.<\/p>\n\n\n\n
What We\u2019re Building<\/h2>\n\n\n\n
Here\u2019s our table (check out the full page version<\/a> to play with the responsive behavior):<\/p>\n\n\n\n You\u2019ll notice that:<\/p>\n\n\n\n The markup will be straightforward: a table with six rows inside a container.<\/p>\n\n\n\n Here\u2019s how it\u2019ll look:<\/p>\n\n\n\n Notice the Mostly, we\u2019ll follow a mobile-first approach for our styles. As mentioned above, we\u2019ll need two helper classes:<\/p>\n\n\n\n At any point, our table will have zebra-striped rows; we\u2019ll use the On small and medium screens, the table header will be hidden. At this point, we\u2019ll show a number indicating the movie number. We\u2019ll replace the table headings with some So, on small screens, it will look like this:<\/p>\n\n\n\n On medium screens, the table will be a two-column grid:<\/p>\n\n\n\n <\/strong><\/p>\n\n\n\n On large screens, all table cells will have a width of 25%. Plus, the table headings will become visible.<\/p>\n\n\n\n Each time we hover over a row, an associated image will appear. Also, a small black bullet will sit at the center-right position to indicate the active row.<\/p>\n\n\n\n With all the above in mind, here\u2019s a part of those styles. Notice how we begin with our table rows using You can check them all by clicking on the CSS <\/strong>tab of the demo.<\/p>\n\n\n\n In this short tutorial, we covered a way to make a responsive table that will look great on different screens. On small and medium screens, we make it behave like a grid, whereas on larger screens, we have a typical table with cells.<\/p>\n\n\n\n![\"codepen](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2024\/02\/codepen-table-1-1024x722.jpg\")
<\/a><\/figure>\n\n\n\n\n
1. Begin With the HTML Markup<\/h2>\n\n\n\n
<div class=\"container\"> \n <table>\n <thead class=\"visible@l\">\n <tr>\n <th>Title<\/th>\n <th>Year<\/th>\n <th>Stars<\/th>\n <th>Plot<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\n <strong class=\"hidden@l\">Title:<\/strong> \n ...\n <\/td>\n <td>\n <strong class=\"hidden@l\">Year:<\/strong> ...\n <img width=\"140\" height=\"209\" src=\"...\" alt=\"...\">\n <\/td>\n <td>\n <strong class=\"hidden@l\">Stars:<\/strong> \n ...\n <\/td>\n <td>\n <strong class=\"hidden@l\">Plot:<\/strong> \n ...\n <\/td>\n <\/tr>\n \n <!-- more table rows here -->\n\n <\/tbody>\n <\/table>\n<\/div><\/code><\/pre>\n\n\n\nvisible@l<\/code> and hidden@l<\/code> classes. These will help us toggle specific elements depending on the viewport size.<\/p>\n\n\n\n2. Add Styles<\/h2>\n\n\n\n
@media (max-width: 999px) {\n .visible\\@l {\n display: none;\n }\n}\n\n@media (min-width: 1000px) {\n .hidden\\@l {\n display: none;\n }\n}<\/code><\/pre>\n\n\n\n:nth-child()<\/code> CSS pseudo-class to generate them.<\/p>\n\n\n\nstrong<\/code> elements that will appear inside each cell.<\/p>\n\n\n\n![\"small](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2024\/02\/small_layout.jpg\")
<\/figure>\n\n\n\n![\"medium](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2024\/02\/md.jpg\")
<\/figure>\n\n\n\n![\"desktop](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2024\/02\/desktop_layout.jpg\")
<\/figure>\n\n\n\n![\"desktop](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2024\/02\/desktop_layout_hovered_state.jpg\")
<\/figure>\n\n\n\ndisplay: flex; flex-wrap: wrap;<\/code>, with display: table-row;<\/code> kicking in once we hit the 1000px breakpoint:<\/p>\n\n\n\n\/*CUSTOM VARIABLES HERE*\/\n\ntable {\n margin: 50px 0 20px;\n text-align: left;\n border-collapse: collapse;\n border: 1px solid var(--table-border);\n}\n\ntable th {\n color: var(--white);\n background: var(--darkblue);\n padding: 20px;\n}\n\ntable td {\n width: 100%;\n padding: 10px;\n}\n\ntable tbody tr {\n display: flex;\n flex-wrap: wrap;\n position: relative;\n counter-increment: counter;\n}\n\ntable tbody tr::before {\n content: counter(counter);\n position: absolute;\n top: 20px;\n right: 20px;\n width: 30px;\n line-height: 30px;\n text-align: center;\n border-radius: 50%;\n font-weight: bold;\n color: var(--white);\n background: var(--black);\n z-index: 1;\n}\n\ntable tbody tr:nth-of-type(even) > * {\n background: var(--lightblue);\n}\n\ntable img {\n display: none;\n position: absolute;\n top: 20px;\n left: 45%;\n max-width: 150px;\n z-index: 1;\n}\n\n@media (min-width: 700px) and (max-width: 999px) {\n table tbody {\n display: flex;\n flex-wrap: wrap;\n }\n\n table tbody tr {\n width: 50%;\n }\n}\n\n@media (min-width: 1000px) {\n table th,\n table td {\n width: 25%;\n }\n\n table tbody tr {\n display: table-row;\n }\n}\n\n@media (hover: hover) and (min-width: 1000px) {\n table tbody tr:hover {\n cursor: pointer;\n }\n table tbody tr:hover img {\n display: block;\n }\n\n table tbody tr:hover td:first-child::before {\n display: block;\n }\n}<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n
![\"final](\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2024\/02\/codepen-table-2-1024x722.jpg\")
<\/a><\/figure>\n\n\n\n