Bootstrap 3, Table에 가로형 스크롤바 삽입하기

반응형이냐 고정형이냐의 고민

Bootstrap 3 환경에서 Table 엘러먼트를 구현시 반응형(responsive)으로 할 것이냐 고정형(fixed)으로 할 것이냐를 고민할 때가 많다. 대세는 반응형이라고 하지만 기업에서 구현하는 시스템의 대부분은 상당히 많은 수의 컬럼을 가진 데이터를 화면 상의 테이블에 출력해야 하는 경우가 많기 때문에 반응형으로 구현하는데 한계가 있다. 이 글에서는 Bootstrap 플랫폼에서 Table 을 반응형 또는 고정형으로 구현하는 방법을 설명하겠다.

첫째, 반응형으로 구현하기

테이블을 반응형으로 구현하는 것은 어렵지 않다. Bootstrap 공식 레퍼런스에서 제시하는 방법은 아래와 같다. 가장 많이 사용하는 방법이다.

<div class="table-responsive">
  <table class="table">...</table>
</div>

• 첫째, 테이블을 구현할 table 엘러먼트에 table 클래스를 부여한다.
• 둘째, table 엘러먼트를 감싸는 div 엘러먼트를 생성하고 table-responsive 클래스를 부여한다.
• 이 방법은 화면의 가로 길이가 768px 이하일 때만 작동한다는 것을 염두해야 한다. 화면의 가로 길이가 768px 이상일 경우에는 변화하는 화면 크기에 맞게 컬럼의 크기가 유동적으로 변한다. 768px 이하가 되면 컬럼 크기가 고정되고 테이블 하단에 가로 방향의 스크롤바가 생성된다.

둘째, 고정형으로 구현하기

고정형으로 구현하는 것은 내가 생각한 일종의 트릭이다. 방법은 아래와 같다.

<div class="fixed-table-container">
  <div class="fixed-table-body">
    <table class="table">...</table>
  </div>
</div>

• 테이블을 구현할 table 엘러먼트를 2번에 걸쳐 감싸는 것 말고는 큰 차이점은 없다.
• 위와 같이 구현하면 테이블의 가로 길이가 화면 길이를 초과할 경우 초과되는 부분은 잘려버린다. 이 현상을 막기 위해 Bootstrap에 미리 정의된 CSS를 아래와 같이 오버라이드(override)한다.

.fixed-table-body {
  overflow-x: auto;
}

• overflow-x 애트리뷰트의 기본값은 hidden으로 되어있다. auto로 변경함으로써 필요한 경우에만 테이블 하단에 가로 방향의 스크롤바가 보여지게 하는 것이다.
• 이 방법은 앞서 반응형 방식과 다르게 화면의 가로 길이와 무관하게 항상 적용된다. 테이블의 가로 길이가 화면 길이보다 클 경우에만 스크롤바가 생성된다.
• Bootstrap Table 플러그인을 사용한다면 이 방법을 권장한다. 플러그인이 가진 복잡성과 구조적 특성으로 인해 반응형 방식으로의 구현이 불가능하다.