How to horizontally scroll through columns in materialize css - css

Question

I am using materialize css, even if I add lot of columns, they adjusts themselves according to the size of the page. I want to make them horizontally scrollable. How to make it scrollable? Here is my table code:
<table class="striped centered responsive-table">
<thead>
<tr>
<th></th>
<th>USN</th>
<th>Name</th>
<th>Department</th>
<th>Address</th>
<th>Student's Phone</th>
<th>Parent's Phone</th>
<th>Student's Email</th>
<th>Parent's Email</th>
</tr>
</thead>
<tbody>
<?php
$result=$db->query($semqy);
$i=0;
while($semdata=$result->fetch_assoc())
{
echo "<tr><td>
<input type='checkbox' id='chkbx$i' name='chkbx$i'/>
<label for='chkbx$i'></label>
</td><td>".$semdata['USN']."</td><td>".$semdata['Name']."</td><td>".$semdata['Dept']."</td><td>".$semdata['Address']."</td><td>".$semdata['Sphone']."</td><td>".$semdata['Pphone']."</td><td>".$semdata['Semail']."</td><td>".$semdata['Pemail']."</td></tr>";
$i++;
}
?>
<tr><td>Send Email</td></tr>
<tr>
<td>Student</td><td>
<input type="checkbox" id="schkbx" name="schkbx"/><label for="schkbx"></label></td>
<td>Parent</td><td><input type="checkbox" id="pchkbx" name="pchkbx"/><label for="pchkbx"></label></td>
</tr>
</tbody>
</table>

Answer 1

A proposed way to go around this is to wrap your table within a who's function is going to be a container and an overflow window.
<div class='table-wrapper'>
<!-- Table Content goes here -->
</div>
With table wrapper in place, you can hide the exceeding content in any overflow you wish. You can check the overflow properties and what they do here: https://developer.mozilla.org/en/docs/Web/CSS/overflow?v=example
For your need, since it's horizontal, we'd want to use the property overflow-x and to force a scroll bar to the division, we would add scroll to it.
Of course, you will have to define the max-width of your wrapper div to the desired measure. Additionnaly, you will ahve to force a size on your table cell to make them take the appropriate space you desire.
Also, very importantly, you will need to set the properties of your table as such:
#tableName {
width: 100%;
table-layout: fixed;
}
This will prevent your table from resizing with the container size.
You can look at an example here:
https://codepen.io/DrSandwich/pen/ZKyvoP