[React] table scroll 추가하기

🍞 table에 data가 크기를 넘어갈 경우 scroll을 추가해보자!

〰 react, TypeScript, styled-components를 사용했습니다

1. table을 감싸는 div를 만들고, style에 코드를 작성해줍니다.

  overflow: auto;

예시 코드
export const TableContainer = styled.div`
  max-height: 140px;
  overflow: auto;
`;

overflow: auto -> 데이터가 넘어갈 경우에만 scroll이 나옴
overflow: scroll -> 항상 테이블에 스크롤을 표시
overflow: hidden -> 데이터가 넘어가면 넘어간 부분은 사라짐

2. thead를 고정하고싶을 때

  position: sticky;
  top: 0px;
  margin: 0;

예시코드
export const TableHead = styled.thead`
  position: sticky;
  top: 0px;
  margin: 0;
`;

〰 나의 경우에는 저렇게 코드를 작성했더니 table의 width가 줄어드는 현상이 있어서 table에 width: 100%를 작성했다.