Linking to full-table is a technique less used because it does not solve the situation completely. It works by replacing the table with a small mock table and creating only a link to view the full table.
The problem persists, but this time, the user can swipe the screen to the left/right in order to see all the content. There is a media query to handle this mechanism for showing it only on small screens.
First of all, let's begin by downloading the full-table.css
file, which is available in the downloadable code files that accompany this book. Then insert it inside the <head>
tag of the HTML code. Although we are dealing with a CSS solution, this code is too extensive and it increases the chances of typo mistakes.
Let's re-use a copy of the table code from the previous example but with alterations in the table element, which is as follows:
<table id="responsive" class="full-table">
At the bottom of DOM (before the </body>
closing tag), we will...