반응형 테이블 스크롤 - ban-eunghyeong teibeul seukeulol

반응형 웹작업에서 모바일 화면에서만 테이블에 횡스크롤을 적용하는 방법입니다. 

먼저 table을 div 태그로 감싸줍니다. 

<div class="table-container">
<table>
/* 테이블이 들어갑니다 */
</table>
</div>

CSS에서는 가로 스크롤을 적용하고자하는 크기의 화면을 미디워쿼리로 설정해줍니다. 

table을 감싼 div태그에 다음과 같이 설정해준뒤, 

table에는 width:auto; 를 설정해줍니다. 

@media screen and (max-width: 765px) and (min-width: 300px){

.table-container{
	 width:100%;	
	 overflow-x:auto;
     white-space: nowrap;
	}
   
 table{
    width:auto;
 } 
 
 }

*참고로 모바일에서는 스크롤이 안보이는 경우가 있는데, 그런 경우엔 이렇게 설정해줍니다. 

모바일에서 항상 스크롤 보이도록 하기

::-webkit-scrollbar { -webkit-appearance: none; } 
::-webkit-scrollbar:vertical { width: 12px; } 
::-webkit-scrollbar:horizontal { height: 8px; } 
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } 
::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; }

이렇게 하면 반응형 화면에서 원하는 크기의 화면에서만 테이블에 가로 스크롤이 생깁니다. 

웹퍼블리싱 작업을 하다 보면, 특히 반응형이나 모바일 환경에서 

table, 표의 양의 방대하다보면 모바일 환경에서 많이 깨져서 보입니다 ,,

반응형 웹에서 테이블이 구조가 바뀌는 소스도 있겠지만,

가장 기본적인 디바이스 크기가 넘어가면 스크롤로 데이터를 볼 수 있게 해주는 css를 소개해드리겠습니다.

See the Pen rNBZzxz by aldo814 (@aldo814) on CodePen.

table을 div로 감싸 준 뒤 , div에 해당 width값을 주어 해당 영역을 넘어가면 스크롤이 생기도록 처리해줍니다.
그다음에 overflow 속성을 사용하여 스크롤 여부 속성을 주면 해당 영역이 넘어가게 되면 스크롤 처리가 됩니다.
overflow 속성에는 ,
overflow:auto : 해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤바를 표시
overflow:scroll : 영역 범위의 초과 여부 상관없이 항상 테이블에 스크롤을 표시
overflow:hidden : 영역을 초과하면 초과한 부분은 사라짐

가로 또는 세로 스크롤 overflow-x:scroll : 가로(너비) 스크롤만 표시.
overflow-y:scroll : 세로(높이) 스크롤만 표시.
overflow-x:hidden : 가로(너비) 스크롤만 표시하지 않음.
overflow-y:hidden : 세로(높이) 스크롤만 표시하지 않음.

또 테이블 스크롤에 필수 속성** table에 white-space:nowrap입니다.

물론 테이블마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면
nowrap를 사용하여 줄 바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보이게 됩니다.

물론, 더 좋은 방법이 있겠지만 가장 기본적이고, 간편하게 css만으로 사용할 수 있는 테이블 스크롤 처리를 알려드렸습니다!

더 좋은 테이블 처리 방법이 있다면 댓글로 알려주세요 :)!!

티스토리 뷰

테이블 스크롤 기능

table 태그를 만들어서 작업하다보면 반응형에서 문제를 일이큽니다.

크기는 줄어드는데, 테이블의 데이터들 때문에 넓어지고나 늘어나거나 길어지곤 합니다.

이럴 때 테이블에 가로 또는 세로 스크롤 기능을 사용하면 됩니다.

순서

• div 하위에 table 생성
• div에 width 값이나 height 값을 지정
• overflow 속성을 사용하여 스크롤 여부 속성을 지정
• 필수 : table 에 white-space:nowrap; 적용
  • 물론 테이블 마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면 nowrap를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다.

/*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤바를 표시*/
overflow:auto;

/*영역 범위의 초과 여부 상관없이 항상 테이블에 스크롤을 표시*/
overflow:scroll;

/*영역을 초과하면 초과한 부분은 사라짐*/
overflow:hidden

/*가로(너비) 스크롤만 표시.*/
overflow-x:scroll;

/*세로(높이) 스크롤만 표시.*/
overflow-y:scroll;

/*가로(너비) 스크롤만 표시하지 않음.*/
overflow-x:hidden; 

/*세로(높이) 스크롤만 표시하지 않음.*/
overflow-y:hidden;

• html

<div>
    <table>
      <tr>
        <th>제목</th>
        <th>제목</th>
      </tr>
      <tr>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
      </tr>
      <tr>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
        <td>테스트테스트테스트테스트테스트테스트테스트테스트테스트</td>
      </tr>
    </table>
</div>

• style

div {
  width:100%;
  overflow:auto;
}
div table {
  white-space:nowrap;
  border-collapse:collapse
}
div table th,div table td {
  border:1px solid #555;
}

1 개요[ | ]

2 가로 스크롤[ | ]

• 화면 폭이 테이블 너비보다 좁을 때는 가로 스크롤

<style>
.table1-wrapper {
  overflow-x: auto; /* responsive */
}
.table1 {
  width: 100%; /* responsive */
  border-collapse: collapse;
}
.table1 th, .table1 td {
  padding: 10px;
  border: 1px solid #ddd;
}
</style>
<div class="table1-wrapper">
<table class="table1">
<tr><th>#</th><th>column1</th><th>column2</th><th>column3</th><th>column4</th><th>column5</th><th>column6</th><th>column7</th><th>column8</th><th>column9</th><th>column10</th><th>column11</th><th>column12</th></tr>
<tr><th>row1</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td><td>cell9</td><td>cell10</td><td>cell11</td><td>cell12</td></tr>
<tr><th>row2</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td><td>cell9</td><td>cell10</td><td>cell11</td><td>cell12</td></tr>
<tr><th>row3</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td><td>cell9</td><td>cell10</td><td>cell11</td><td>cell12</td></tr>
</table>
</div>

3 언피벗[ | ]

• 화면 폭이 지정한 너비보다 좁을 때는 언피벗 형태로 전환

<style>
.table1 {
  border-collapse: collapse;
  min-width: 200px;
}
.table1 th, .table1 td {
    padding: 10px;
    border: 1px solid #ddd;
}
@media (max-width: 760px) {
  .table1 thead { 
		display: none;
	}
  .table1, .table1 tbody, .table1 tr, .table1 th, .table1 td {
    display: block;
	}
  .table1 td {
    position: relative;
    padding-left: 50%; 
  }
  .table1 td:before {
		position: absolute;
		top: 24%;
    right: 65%;
    font-weight: bold;
	}
  .table1 td:nth-of-type(1):before { content: "column1"; }
  .table1 td:nth-of-type(2):before { content: "column2"; }
  .table1 td:nth-of-type(3):before { content: "column3"; }
  .table1 td:nth-of-type(4):before { content: "column4"; }
  .table1 td:nth-of-type(5):before { content: "column5"; }
  .table1 td:nth-of-type(6):before { content: "column6"; }
  .table1 td:nth-of-type(7):before { content: "column7"; }
  .table1 td:nth-of-type(8):before { content: "column8"; }
}
</style>
<table class="table1">
<thead>
  <tr><th>#</th><th>column1</th><th>column2</th><th>column3</th><th>column4</th><th>column5</th><th>column6</th><th>column7</th><th>column8</th></tr>
</thead>
<tbody>
  <tr><th>row1</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
  <tr><th>row2</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
  <tr><th>row3</th><td>cell1</td><td>cell2</td><td>cell3</td><td>cell4</td><td>cell5</td><td>cell6</td><td>cell7</td><td>cell8</td></tr>
</tbody>
</table>

4 같이 보기[ | ]

• HTML table
• 반응형 웹디자인
• CSS overflow-x
• HTML 테이블 CSS 스타일