table {
  border-collapse: collapse;
  border-spacing: 0;
}

.floatThead-table {
    background-color:white;
}

/* Note: I set a custom class on the floatthead-container in the plugin init. */
.rotated-table-cells-container {
  overflow-y: hidden;
}

.cell-rotate {
  vertical-align: bottom;
  padding: 0 !important;
  text-align: left;
}

.cell-rotate .cell-positioner {
  position: relative;
}

.cell-rotate .cell-label {
  position: absolute;
  bottom: 0;
  text-align: left;
  left: 100%;
  transform-origin: bottom left;
  /* Push the border down to line up with the columns. Equal to border-width. */
  margin-bottom: -1px;
  border-bottom: 1px solid #ccc;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


/* These styles do not matter, they make it looks good. */

.soa th {
  padding: 2px 10px;
}

.soa td {
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 5px 10px;
}

/* Make the table scroll inside a div. */
.table-container {
  height: 500px;
  overflow-y: auto;
}

.rotated-table-cells-container {
  background-color: white;
}