.rtable{display:inline-block;vertical-align:top;max-width:100%;overflow-x:auto;// optional - looks better for small cell values
  white-space:nowrap;border-collapse:collapse;border-spacing:0}.rtable,.rtable--flip tbody{// optional - enable iOS momentum scrolling
  -webkit-overflow-scrolling:touch;// scrolling shadows
  background:radial-gradient(left,ellipse,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 75%) 0 center,radial-gradient(right,ellipse,rgba(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}// change these gradients from white to your background colour if it differs
// gradient on the first cells to hide the left shadow
.rtable td:first-child,.rtable--flip tbody tr:first-child{background-image:linear-gradient(to right,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);background-repeat:no-repeat;background-size:20px 100%}// gradient on the last cells to hide the right shadow
.rtable td:last-child,.rtable--flip tbody tr:last-child{background-image:linear-gradient(to left,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);background-repeat:no-repeat;background-position:100% 0;background-size:20px 100%}.rtable th{font-size:11px;text-align:left;text-transform:uppercase;background:#f2f0e6}.rtable th,.rtable td{padding:6px 12px;border:1px solid #d9d7ce}.rtable--flip{display:flex;overflow:hidden;background:none}.rtable--flip thead{display:flex;flex-shrink:0;min-width:min-content}.rtable--flip tbody{display:flex;position:relative;overflow-x:auto;overflow-y:hidden}.rtable--flip tr{display:flex;flex-direction:column;min-width:min-content;flex-shrink:0}.rtable--flip td,.rtable--flip th{display:block}.rtable--flip td{background-image:none !important;// border-collapse is no longer active
  border-left:0}// border-collapse is no longer active
.rtable--flip th:not(:last-child),.rtable--flip td:not(:last-child){border-bottom:0}