표나 이미지에 스크롤바 생길 때 수정 방법

반응형 레이아웃

모바일 화면을 위해 가로 크기를 100%로 했을 때, 안쪽의 내용이 길어지면 줄바꿈이 되어 크기를 유지하거나 스크롤바가 생깁니다. 하지만 레이아웃이 변경되는 것을 원하지 않을 수도 있습니다. 해결 방법을 아래의 예제를 통해서 살펴보겠습니다.

 

예제

다음은 표의 최소 가로 크기를 정한 예제입니다. 가로로 스크롤이 생깁니다.

<div>
  <table>
    <tr>
      <td>Lorem</td><td>Ipsum</td><td>Dolor</td>
    </tr>
    <tr>
      <td>Lorem</td><td>Lorem Ipsum Dolor Lorem Ipsum</td><td>Dolor</td>
    </tr>
  </table>
</div>

<h2>Lorem</h2>
<h2>Ipsum</h2>
<h2>Dolor</h2>

table {
  width: 100%;
  min-width: 1300px;
}
td {
  padding: 20px;
  border: 1px solid #444444;
}
h2 {
  text-align: center;
  background-color: #eeeeee;
}

 

하지만, 스크롤을 이동하면 다른 레이아웃도 함께 이동합니다.

다른 레이아웃은 건드리지 않고 표만 스크롤해서 내용을 볼 수 있도록 하는 방법은 overflow-x 속성을 이용하는 것입니다. 표의 부모 요소에 overflow-x: auto; 속성을 추가합니다.

div {
  overflow-x: auto;
}
table {
  width: 100%;
  min-width: 1300px;
}
td {
  padding: 20px;
  border: 1px solid #444444;
}
h2 {
  text-align: center;
  background-color: #eeeeee;
}

 

스크롤 바를 없애고 싶다면 다음과 같은 CSS를 추가합니다.

div::-webkit-scrollbar {
  width: 0px;
}

또는

div::-webkit-scrollbar {
  display: none;
}

를 추가합니다. div는 적용될 class 명으로 알맞게 변경합니다.