# Display: table 테이블 꾸미기

**URL:** <https://ask.selectfromuser.com/t/display-table/414>\
**Category:** 자유게시판\
**Created:** [5월 8, 2025, 10:01오후 UTC](https://ask.selectfromuser.com/t/display-table/414 "2025-05-08T22:01:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhlee](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/jhlee/32/20_2.png) [@jhlee](https://ask.selectfromuser.com/u/jhlee)\
**Post date:** [5월 8, 2025, 10:01오후 UTC](https://ask.selectfromuser.com/t/display-table/414/1 "2025-05-08T22:01:37Z")

</div>

> ### 단순한 테이블

```yaml
display: table

```

 ![Screenshot 2025-03-06 at 4.21.10 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/befbe030f15890a6ece50df50ce909ae3b9ade03.png)

> ### 고정폭 테이블

```yaml
tableOptions:
  style: 
    cellWidth: 150px

```

 ![Screenshot 2025-03-06 at 4.23.30 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/0aab8c852430e7fcbd535a5dcf0a483017603513.png)

> ### 테두리 있는 테이블

```yaml
tableOptions:
  containerClass: overflow-auto border shadow-sm rounded
  containerStyle:
    height: 300px

```

 ![Screenshot 2025-03-06 at 4.22.00 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/d87ee967da97d5c82cedf0e4ad676414cffeb3d0.png)

> ### 헤더가 고정된 스크롤 테이블

```yaml
headerClass: sticky top-0 z-0 bg-white
containerClass: overflow-auto
containerStyle:
  width: 1200px
  height: 300px

```

 ![Screenshot 2025-03-06 at 4.25.40 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/3edccf6920bd055a59bf732c76d4dcf415d8f33c.png)

> ### 헤더가 고정된 스크롤 테이블 - 스타일 예시

```yaml
headerClass: sticky py-4 top-0 z-0 bg-white/75 backdrop-blur backdrop-filter
containerClass: overflow-auto border-t
containerStyle:
  width: 1200px
  height: 300px

```

 ![Screenshot 2025-03-06 at 4.26.22 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/99d625fce910d32a8003fc21b48803c48538f65a.png)

> ### 줄 색상이 강조된 테이블

```yaml
style: 
  width: 1000px
class: divide-zinc-400

```

 ![Screenshot 2025-03-06 at 4.32.31 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/b105abd6b052459c90a9148f5ff6f706630f2372.png)

> ### 줄 배경색 표시된 테이블

```yaml
rowClass: even:bg-zinc-100/50

```

 ![Screenshot 2025-03-06 at 4.35.58 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/1d3d78df3996f2efe8ac6af5a8129bcca7ad1995.png)

> ### 줄 배경색 표시된 테이블 - 스타일 예시

```yaml
rowClass: odd:bg-zinc-100/50

```

 ![Screenshot 2025-03-06 at 4.36.19 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/8049d83907117a5f9071f5e7bcda07ce312f4816.png)

> ### 표시된 내용을 강조하는 테이블

```yaml
rowActiveClass: bg-slate-100 shadow

```

 ![Screenshot 2025-03-06 at 4.39.56 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/3b57423d846b706e84c1d0d74aed94304262007f.png)  
 ![Screenshot 2025-03-06 at 4.40.33 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/dfc21bb2350212467def9c65b0ff8f41fd9f54e7.png)

> ### 가로줄 있는 테이블

 ![Screenshot 2025-03-06 at 4.51.36 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/8e82f1afc6d5a632adb753d80a2610dcafa1d655.png)

> ### 헤더와 내용 모두 가로줄 있는 테이블

```yaml
rowClass: divide-x
headerRowClass: divide-x
class: border-t  

```

 ![Screenshot 2025-03-06 at 4.59.30 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/2836fb270bd8fabdb3a51bb683f7e45944c01dce.png)

> ### 헤더와 내용 모두 가로줄 있는 테이블 - 스타일 예시

```yaml
rowClass: divide-x
headerRowClass: bg-zinc-100 divide-x shadow-sm 
containerClass: border

```

 ![Screenshot 2025-03-06 at 5.02.54 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/d33a9c517cc9e9530528e6419927ea75edb07665.png)

> ### 고정형 헤더와 가로줄 있는 테이블 - 스타일 예시

```yaml
style:
  width: 1200px # 테이블 크기
containerStyle:
  height: 300px # 보이는 영역의 높이
  width: 600px # 보이는 영역의 가로
containerClass: overflow-auto border shadow-sm rounded

rowClass: divide-x
headerClass: sticky top-0 z-10 bg-zinc-100 
headerRowClass: divide-x divide-zinc-300

```

 ![Screenshot 2025-03-06 at 5.09.12 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/bbf8e3c773d5da1c15ec0cc9280200eb9ccc522e.png)

> ### 조회건수가 적어도 높이를 유지하는 테이블 (페이지 번호 위치 고정)

```yaml
tableOptions:
  style:
    min-height: 300px

```

 ![스크린샷 2025-03-06 오후 8.43.11](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/b31bb0da367dff78036853a020919657fc89083a.png)

> ### 대량의 전체화면 테이블 (페이지 번호를 하단 고정)

```yaml
display: table
paginationOptions:
  enabled: true
  perPage: 30
  fixed: true

```

 ![Screenshot 2025-03-07 at 3.04.24 PM](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/ef12f0ce83fecef222cd0b77933c7b8f241f4921.png)