Dynamic Table with a horizontal Scrollbar in CSS - php

Question

Working on a homepage I came to the following problem:
I want to display a table - the number of table columns can be chosen with checkboxes. Also, my website should work on a mobile phone, so I put in the correspondingly meta line.
Unfortunately, my website do not work properly as it do not shows my horizontal scrollbar..
PHP Code:
echo '<table id="dynamictable">';
echo '<tr>';
foreach($res_category_arr as $columnname)
{
echo '<th>' . $columnname. '</th>';
}
echo '</tr>';
if (mysqli_num_rows($result) > 0)
{
while($data_current_row=mysqli_fetch_assoc($result))
{
echo '<tr>';
foreach($res_category_arr as $tabledata)
{
echo '<td>' . $data_current_row[$tabledata] . '</td>';
}
echo '</tr>';
}
}
echo '</table>';
res_category_arr represents an array, which contains the wanted column names.
CSS Code:
#dynamictable{
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
text-align: center;
}
#dynamictable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
#dynamictable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

Answer 1

Take the ID off the table, and put it on a div AROUND the table.
It should do what you're looking for, but you might also want to add a width:100% back to the table as well.
EDIT: Figured I would add a simple working example here.
http://codepen.io/anon/pen/qaGARr?editors=1100#0
.scroll {
overflow-x:auto;
width:100%;
}
table {
width:100%;
min-width:700px;
}
If you go below 700px wide, the scrollbar shows up