[TIL] 표 width 고정

api로 표의 데이터를 가져오다보면 width가 길어짐에 따라 상단 tr부분이 같이 늘어난다.

width를 고정 한뒤에 css 옵션을 추가해준다.

테이블 width 넓어짐
white-space: nowrap;

어떤 상황에서도 표 크기를 고정하고 싶다면 table-layout 속성을 사용(값을 fixed로 정하면 table의 크기가 커지지 않음)
width: 500px; 
table-layout: fixed;

표 크기 고정 후 줄바꿈
word-break: break-all; // 텍스트 줄바꿈 처리 (개행): 단어 깨짐
word-break: keep-all; // 텍스트 줄바꿈 처리 (개행): 단어 깨지지 않음 

.table { // table 태그의 클래스
  table-layout: fixed; 
  word-break: keep-all; // 크기 고정했다면 굳이 안써도 자동으로 텍스트가 넘어간다.
}

++ 기존에 작성해 놨던 반응형에 모바일 환경 고려한다면 fixed 풀어줘야함

@media only screen and (max-width: 991px) {
  .table {
    table-layout: auto; 
    // or no-wrap or whatever you want
  } 

출처

https://zxchsr.tistory.com/17