[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
}
출처
Author And Source
이 문제에 관하여([TIL] 표 width 고정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@iooi75/TIL-표-width-고정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)