.table-scroll {
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
margin-bottom: 1em;
}
.table-scroll table {
width: max-content;
min-width: 100%;
border-collapse: collapse;
}
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #444;
background: rgba(255, 255, 255, 0.8);
border-radius: 20%;
padding: 0px 5px;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);
animation: blink 1s infinite;
pointer-events: none;
z-index: 2;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.scroll-arrow.hidden {
opacity: 0;
animation: none;
}
@keyframes blink {
0%,
100% {
opacity: 0.2;
}
50% {
opacity: 1;
}
}