/* Use overflow:scroll on your container to enable scrolling: */

.JBMD-table-scrollable {
  overflow: scroll;
}
/* Use position: sticky to have it stick to the edge
 * and top, right, or left to choose which edge to stick to: */

.JBMD-table-scrollable thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

.JBMD-table-scrollable tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

/* To have the header in the first column stick to the left: */

.JBMD-table-scrollable thead th:first-child {
  left: 0;
  z-index: 2;
}

/* Just to display it nicely: */

.JBMD-table-scrollable thead th {
  background: #ffffff;
  /* Ensure this stays above the emulated border right in tbody th {}: */
  z-index: 1;
}

.JBMD-table-scrollable tbody th {
  background: #FFF;
  /* Browsers tend to drop borders on sticky elements, so we emulate the border-right using a box-shadow to ensure it stays: */
  box-shadow: 1px 0 0 0 #ccc;
}

.JBMD-table-scrollable table {
  border-collapse: collapse;
}

.JBMD-table-scrollable td,
.JBMD-table-scrollable th {
  padding: 0.5em;
}

.JBMD-table-scrollable tr:hover td, .JBMD-table-scrollable tr:hover th{
    box-shadow: 0 0 10px 0 #00ADA8 inset !important;
}

@media print {
  /* All your print styles go here */
    .JBMD-table-scrollable {
    overflow: visible;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    }
}