I am attempting to have scroll bars only appear in a table when necessary, while also showing colors upon hovering over rows and columns. The row and column highlighting on hover is functioning properly, but the scroll bar is persistently visible.
What steps can I take to ensure the scroll bar appears only when needed?
#table_grid {
border-spacing: 0;
border-collapse: collapse;
/*overflow: hidden;*/
font-family: arial, verdana, sans-serif;
font-size: 12px;
background: #fff;
margin: 0px;
text-align: left;
max-height: 100%;
max-width: auto;
display: block;
overflow: auto;
}
#table_grid td,
th {
color: #669;
padding: 9px 8px 4px 8px;
font-size: 13px;
position: relative;
}
#table_grid tr:hover {
background-color: rgba(220, 220, 220, 0.5);
}
#table_grid td:hover::after,
th:hover::after {
background-color: rgba(211, 211, 211, 0.2);
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
pointer-events: none;
}<table id="table_grid">
<tr>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
<td>testing</td>
</tr>
</table>