This technique works by freezing the first column, allowing you to scroll down the other columns under it. This way we keep seeing the first column content for each row, which permits left scrolling, to see the remaining content in order to make data comparison easier.
This table is recommended for tables that have a greater number of columns and the content of the first column is more important than others. Let's clarify how it will look by practicing it in the next example.
We will start by downloading the solution from http://zurb.com/playground/responsive-tables. After that, let's create a new HTML file and include the CSS stylesheet inside the <head>
tag:
<link rel="stylesheet" href="css/responsive-tables.css">
Now insert the following HTML table code using more columns than the previous one and with a class named responsive
:
<table class="responsive">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>...