tuliprox/frontend/scss/app/components/_table.scss

.tp__table {
  display: flex;
  flex-flow: column;
  gap: var(--gap-default);
  background-color: var(--card-background-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
  fill: var(--modest-text-color);

  &__container {
    display: flex;
    flex-flow: column;
    padding-right: 1px;
    overflow: auto; pointer-events: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  &__nowrap {
    white-space: nowrap;
  }

  &__table {
    width: 100%;
    border-collapse: collapse;
    position: relative;

    thead {
      tr {
        th {
          position: sticky;
          top: 0;
          z-index: 2;
          font-size: var(--font-size-md);
          font-weight: bold;
          //text-align: center;
          padding: var(--padding-mini);
          line-height: 1.2;
          background-color: var(--table-header-background-color);
          box-shadow: inset 0 -1px 0 var(--border-color);

          &:not(:last-child) {
            border-right: 1px solid var(--border-color);
          }

          svg,
          .svg-icon {
            display: block;
            width: 1rem;
            height: 1rem;
          }
        }
        .tp__table-header {
           display: flex;
           flex-flow: row;
           gap: var(--gap-small);
           align-items: center;
           justify-content: center;
           cursor: pointer;
            svg,
           .svg-icon {
             display: block;
             width: 1rem;
             height: 1rem;
           }
        }
      }
    }

    tbody {
      tr {
        &:nth-child(even) {
          background-color: var(--table-alternate-background-color);
        }
        &:not(:last-child) {
          border-bottom: 1px solid var(--border-color);
        }
        td {
          height: fit-content;
          vertical-align: top;
          padding: var(--padding-mini);

          /* cell border
          &:not(:last-child) {
            border-right: 1px solid var(--border-color);
          }
          */

          svg,
          .svg-icon {
            display: block;
            width: 1rem;
            height: 1rem;
          }
        }
      }
    }
  }

  &__cell--center {
    text-align: center;
  }
  &__number-cell {
    text-align: right;
  }
}

.tp__paged-table {

  &__controls {
    display: flex;
    flex-flow: column;
    gap: var(--gap-default);
    padding: var(--padding-default) 0;

  }

  &__paging-info {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap-larger);
    align-items: center;
  }

  &__size {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap-default);
    align-items: center;
  }

  &__buttons {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap-default);
    align-items: center;
  }

  &__pages {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap-default);
    align-items: center;
  }

}