.sticky-column-table
  max-width: 100%
  
  thead
    background: rgb(245, 246, 247)

  thead tr:first-child
    height: 40px
    line-height: 14px
  
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)

  thead tr:first-child th:first-child
    background-color: rgb(245, 246, 247)

  td:first-child
    background-color: #fff

  th:first-child,
  td:first-child
    position: sticky
    left: 0
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px

  td.none-shadow
    box-shadow: none

.sticky-tow-column-table
  max-width: 100%
  
  thead
    background: rgb(245, 246, 247)

  thead tr:first-child
    height: 40px
    line-height: 14px
  
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)

  thead tr:first-child th:nth-child(-n+2)
    background-color: rgb(245, 246, 247)

  td:nth-child(-n+2)
    background-color: #fff
 
  th:nth-child(-n+2),
  td:nth-child(-n+2)
    position: sticky
    left: 0
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) 2px 0px 0px

  td.none-shadow
    box-shadow: none

.sticky-right-column-table
  max-width: 100%
  
  thead
    background: rgb(245, 246, 247)

  thead tr:first-child
    height: 40px
    line-height: 14px
  
  thead tr:first-child th
    font-size: 12px
    font-weight: 400
    color: rgb(168, 168, 179)

  thead tr:first-child th:last-child
    background-color: rgb(245, 246, 247)

  td:last-child
    background-color: #fff

  th:last-child,
  td:last-child
    position: sticky
    right: 0
    z-index: 1
    box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px
.sticky-header-table
  /* height or max-height is important */

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    /* bg color is important for th; just specify one */
    background-color: #f5f6f7

  thead tr th
    position: sticky
    z-index: 2 !important
  thead tr th:first-child
    z-index: 3 !important
  thead tr:first-child th
    top: 0

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
.no-bottom-table
  .q-table__bottom
    display: none !important

.sticky-header-column-table
  td:first-child
    /* bg color is important for td; just specify one */
    background-color: #c1f4cd !important

  tr th
    position: sticky
    /* higher than z-index for td below */
    z-index: 2
    /* bg color is important; just specify one */
    background: #fff

  /* this will be the loading indicator */
  thead tr:last-child th
    /* height of all previous header rows */
    top: 48px
    /* highest z-index */
    z-index: 3
  thead tr:first-child th
    top: 0
    z-index: 1
  tr:first-child th:first-child
    /* highest z-index */
    z-index: 3

  td:first-child
    z-index: 1

  td:first-child, th:first-child
    position: sticky
    left: 0

.sticky-two-header-table
  /* height or max-height is important */

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    /* bg color is important for th; just specify one */
    background-color: #f5f6f7

  thead tr th
    position: sticky
    z-index: 2 !important
  thead tr th:nth-child(-n+2)
    z-index: 3 !important
  thead tr:first-child th
    top: 0

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th
    /* height of all previous header rows */
    top: 48px