@dabapps/roe/src/less/tables.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

.table-wrapper {
  position: relative;
}

.table-scroller {
  overflow: auto;
}

.table-header,
.table-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table {

  &.fixed {
    table-layout: fixed;
  }

  &.striped {
    .table-body {
      .table-row:nth-child(odd) {
        .table-header,
        .table-cell {
          background-color: @table-stripe;
        }
      }
    }
  }

  &.condensed {
    .table-header,
    .table-cell {
      padding: @padding-base / 2;
    }
  }

  &.hover {
    .table-body .table-row {
      cursor: pointer;

      .table-header,
      .table-cell {
        transition: ease-in-out 0.1s background-color;
      }

      &:hover:not([disabled]):not(.disabled) {
        .table-header,
        .table-cell {
          background-color: @table-hover;
        }
      }
    }
  }

  &.bordered {
    border: @table-border;

    .table-header,
    .table-cell {
      border: @table-border;
    }
  }

  &.fix-row-headers {
    .table-row .table-cell:first-child,
    .table-row .table-header:first-child {
      position: absolute;
      border-right: @table-border;
      left: 0;
      border-bottom: @table-border;
      // Hack to fix bad rendering in Chrome
      transform: translate(0, 0);
    }

    .table-body .table-row:last-child .table-cell:first-child,
    .table-body .table-row:last-child .table-header:first-child {
      border-bottom: @border-none;
    }
  }

  &.fill {
    width: 100%;
  }
}