'Force scrollbar visible on overflow-x?
I have a table that is horizontally scrollable, thanks to this
However, the horizontal scrollbar just hides after a few seconds. Meaning before user touches the table, there is no indication it could be scrollable. Is there a way to force the scollbar to be visible at all times?
I'm using Windows 10 and MS Edge (the Chromium one), but the same behavior happens on Firefox (both desktop and Chrome)

<div class="adminUserTable">
<div class="scroll1">
<div class="scroll2">
<table>
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
<th>Group</th>
<th>Edit</th>
<th>User Tickets</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($res)){
$rowid = $row["id"];
?>
<tr>
<td><?php echo $rowid?></td>
<td><?php echo $row["nickname"]?></td>
<td><?php echo $row["email"]?></td>
<td><?php echo $row["usergroup"]?></td>
<td>
<a href="./?action=editUser&id=<?php echo($rowid) ?>">Edit #<?php echo($rowid)?></a>
</td>
<td>
<a href="./?action=viewTickets&id=<?php echo($rowid) ?>">View #<?php echo($rowid)?></a>
</td>
</tr>
<?php
}
$stmt->close();
?>
</table>
</div class="scroll2">
</div class="scroll1">
</div>
.adminUserTable {
width: 360px;
}
.adminUserTable table {
width: 100%;
border-collapse: collapse;
}
.adminUserTable td,
.adminUserTable th {
/*border: 1px solid black;*/
min-width: 66px;
}
/* try removing the "hack" below to see how the table overflows the .body */
.scroll1 {
display: table;
table-layout: fixed;
width: 100%;
}
.scroll2 {
display: table-cell;
overflow-x: scroll;
width: 100%;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
