ar-design/dist/assets/css/components/data-display/table/scroll.css

AR Design is a (react | nextjs) ui library.

.ar-table {
  /* Scroll durumu */
  &:is(.scroll) {
    > .content {
      max-width: 100%;
      overflow: auto;

      > table {
        > thead {
          > tr {
            > th {
              position: sticky;
              top: 0;
            }
          }
        }
      }
    }
  }

  > .content {
    > table {
      th[class^="sticky-"] {
        z-index: 50;
      }

      > thead {
        > tr {
          > th {
            &:is(.sticky-left, .sticky-right) {
              &:is(.sticky, .active-sticky) {
                background-color: var(--gray-100);

                &::after {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  content: "";
                  background-color: var(--gray-200);
                  width: 1px;
                  height: 50%;
                }
              }
            }

            &.sticky-left {
              position: sticky;
              left: 0;

              &:is(.sticky, .active-sticky) {
                &::after {
                  right: 0;
                }
              }
            }

            &.sticky-right {
              position: sticky;
              right: 0;

              &:is(.sticky, .active-sticky) {
                &::after {
                  left: 0;
                  right: auto;
                }
              }
            }
          }
        }
      }

      > tbody {
        > tr {
          > td {
            &:is(.sticky-left, .sticky-right) {
              &:is(.sticky, .active-sticky) {
                background-color: var(--gray-100);
              }
            }

            &.sticky-left {
              position: sticky;
              left: 0;

              &:is(.sticky, .active-sticky) {
                box-shadow: inset -1px 0 0 0 var(--gray-200);
              }
            }

            &.sticky-right {
              position: sticky;
              right: 0;

              &.sticky {
                box-shadow: inset 1px 0 0 0 var(--gray-200);
              }
            }
          }
        }
      }
    }
  }
}

/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
/* Çok dar ekranlar için özel düzeltmeler */
@media (max-width: 375px) {
}

/* --- [MOBİL - STANDART] --- */
/* Ekran 576px ve altına düştüğünde çalışır */
@media (max-width: 576px) {
}

/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
/* Ekran 768px ve altına düştüğünde çalışır */
@media (max-width: 768px) {
  .ar-table {
    /* Scroll durumu */
    &:is(.scroll) {
      > .content {
        > table {
          > thead {
            > tr {
              > th {
              }
            }
          }
        }
      }
    }

    > .content {
      > table {
        th[class^="sticky-"] {
        }

        > thead {
          > tr {
            > th {
              &:is(.sticky-left, .sticky-right) {
                &:is(.sticky, .active-sticky) {
                  &::after {
                  }
                }
              }

              &.sticky-left {
                position: static;
                left: auto;

                &:is(.sticky, .active-sticky) {
                  &::after {
                  }
                }
              }

              &.sticky-right {
                position: static;
                right: auto;

                &:is(.sticky, .active-sticky) {
                  &::after {
                  }
                }
              }
            }
          }
        }

        > tbody {
          > tr {
            > td {
              &:is(.sticky-left, .sticky-right) {
                &:is(.sticky, .active-sticky) {
                  background-color: transparent;
                }
              }

              &.sticky-left {
                position: static;
                left: auto;

                &:is(.sticky, .active-sticky) {
                  box-shadow: none;
                }
              }

              &.sticky-right {
                position: static;
                right: auto;

                &.sticky {
                  box-shadow: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* --- [TABLET & KÜÇÜK LAPTOP] --- */
/* Ekran 1024px ve altına düştüğünde çalışır */
@media (max-width: 1024px) {
}