<style>
.rtable {
display: inline-block;
vertical-align: top;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
}
.rtable,
.rtable--flip tbody {
-webkit-overflow-scrolling: touch;
background: radial-gradient(left, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
background-size: 10px 100%, 10px 100%;
background-attachment: scroll, scroll;
background-repeat: no-repeat;
}
.rtable td:first-child,
.rtable--flip tbody tr:first-child {
background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, white), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%);
background-repeat: no-repeat;
background-size: 20px 100%;
}