.table-head{
  background: #5182bd;
  color: #fff;
  text-align: center;
  padding: 5px;
}
.table-wrapper {
  height: 500px;
  border: 1px solid #666;
  overflow: auto;
}
@media only screen and (max-width: 1600px){
.table-wrapper{ height: 300px;}
}

.table-wrapper table {
  border-spacing: 0;
  width: 100%;
}
.table-wrapper table th{ color: #fff; border-right: 1px solid #666;font-weight: bold;}

.table-wrapper thead {
  font-size: 12px;
  line-height: 16px;

}
.table-wrapper thead th {
   padding: 5px 0;
}

.table-wrapper tbody {
  font-size: 12px;
  line-height: 16px;
}
.table-wrapper tbody tr td{background: #fff;}
.table-wrapper tbody tr:nth-child(even) td{background: #e3efff;}
.table-wrapper tbody tr td:first-child{background: #b6d4ff;}

.table-wrapper th,.table-wrapper td {
  padding: 3px;
  white-space: nowrap;
  border-bottom: 1px solid #666;
  border-left: 1px solid #666;
  text-align: center;
}

.table-wrapper th:first-child,.table-wrapper td:first-child{
  border-left: 0;
}


.table-wrapper tr:last-child td {
  border-bottom: none;
}


/*
STICKY ROW
Normal css box-shadow works for the header as it is a single html element
*/

.table-wrapper tr.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #5182bd;
}


/*
STICKY COLUMN
Avoid undesirable overlapping shadows by creating a faux shadow on the ::after psudo-element instead of using the css box-shadow property.
*/

.table-wrapper th.sticky,
.table-wrapper td.sticky {
  position: sticky;
  left: 0;

}
.table-wrapper th.sticky{background: #5182bd;color: #fff; z-index: 2;}

.table-wrapper th.sticky::after,
.table-wrapper td.sticky::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  bottom: 0;
  height: 100%;
  background:#666;
}
.table-wrapper th{position: relative; z-index: 1;}
.table-wrapper th::after{
   content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  bottom: 0;
  height: 100%;
  background:#666;
}

.table-wrapper th.sticky::before,
.table-wrapper td.sticky::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: -1px;
  width: 5px;
  border-right: 1px solid #666;
  background:#fff;
}