[CSS] 상위요소 너비 이상이면 스크롤 생성

table이 상위 요소의 너비를 넘어갈 때 스크롤이 생기도록 하려면,

table을 감싸는 컨테이너에 CSS 속성을 추가하여 해결할 수 있습니다. 

 

html 코드

<div class="table-container">
  <table>
    <!-- 테이블 내용 -->
  </table>
</div>

 

css 코드

.table-container {
  width: 100%;  /* 원하는 너비를 지정할 수 있음 */
  overflow-x: auto;  /* 가로 스크롤이 필요할 때만 생성 */
}

table {
  width: 100%;  /* 테이블 크기 조절을 위해 width 사용 */
  min-width: 600px;  /* 테이블의 최소 너비를 설정 (옵션) */
  border-collapse: collapse;
}

 

overflow-x: auto 속성은 테이블이 컨테이너 너비를 넘어갈 경우 가로 스크롤을 생성해 줍니다.

min-width를 통해 테이블의 최소 너비를 설정하여, 작은 화면에서도 스크롤이 제대로 작동하도록 할 수 있습니다.