I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths.
For instance,
- Table A requires vertical scroll on devices smaller than 768px
- Table B requires vertical scroll on devices smaller than 667px
- Table C requires vertical scroll on devices smaller than 414px
- And the list goes on...
Now, I am looking for a way to display a notification when a table becomes scrollable without manually adding classes and media queries to each table, which would be very time-consuming given the number of tables I have.
Does anyone know of a CSS trick or script that can automatically show a note when a table becomes scrollable?
Take a look at the snippet below. In this example, the <p> element is set to display:block on devices with a maximum width of 736px because the table is scrollable in those cases.
p{
font-family:arial;
display:none;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ababab;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.scrollable {
overflow-x: auto;
}
@media screen and (max-width: 736px)
{
p{
display:block;
}
}<div class="scrollable">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
<p>Note: Scroll above table to see more content.</p>