Scroll bar

스크롤을 주고 싶은 해당 영역에 class를 부여.

table에 스크롤을 주고 싶은 경우는 table을 div영역으로 감싸서 클래스를 부여하면 됨.

table자체에는 스크롤 태그 적용 불가

어떤 영역에 스크롤바를 추가하고 싶은 경우 보통 아래 3가지 속성 기본!

@charset "UTF-8";

/* 스크롤바 사용 시 영역 지정을 꼭 해줘야 함. */
.my-scroll{
	
	height: 100px;
    /*max-height: 14.7rem;*/
	overflow: scroll;
	width: 200px;
    /*overflow-y: auto;  y축에만 스크롤 생김, 범위를 벗어나면 스크롤 적용 */
}

max-height 사용하면 아래 오른쪽 그림처럼 각 주문상태 영역에 데이터가 없어도 지정한 height만큼 크기 고정되지 않음!

 

스크롤 스타일 변경

/* 스크롤바 스타일 바꾸기 */
.my-scroll::-webkit-scrollbar {
        width: 8px;  /* 스크롤바의 너비 */
      }
      .my-scroll::-webkit-scrollbar-thumb {
        height: 30%; /* 스크롤바의 길이 */
        background: #b7b7b7; /* 스크롤바의 색상 */
        border-radius: 10px;
      }
      
      .my-scroll::-webkit-scrollbar-track {
        background: #84848447;  /*스크롤바 뒷 배경 색상*/
      }

 

제목줄 고정 내용만 움직이는 스크롤바 적용하고 싶은 경우

테이블을 두개 만들어서 헤드/바디 나눔.

바디에만 스크롤 주면 됨.

<div class="row mb-3">
    <div class="col">
        <table class="table table-striped table-hover text-center">
            <colgroup>
                <col width="">
                <col width="">
                <col width="">
                <col width="">
                <col width="">
                <col width="">
                <col width="">
                <col width="">
            </colgroup>
            <thead class="table-head">
                <tr>
                    <td>NO</td>
                    <td>구매코드</td>
                    <td>구매자ID</td>
                    <td>연락처</td>
                    <td>결제금액</td>
                    <td>주문상태</td>
                    <td>구매일</td>
                </tr>
            </thead>
            <tbody>
                <th:block>
                    <tr th:each="order, state: ${orderList}">
                        <td>[[${#lists.size(orderList) - state.index}]]</td>
                        <td>[[${order.buyVO.buyCode}]]</td>
                        <td>[[${order.memId}]]</td>
                        <td>[[${order.memberVO.memTell}]]</td>
                        <td>[[${#numbers.formatCurrency(order.buyVO.buyPrice)}]]</td>
                        <td>[[${order.statusInfoVO.statusName}]]</td>
                        <td>[[${order.buyVO.buyDate}]]</td>
                    </tr>
                </th:block>
            </tbody>
        </table>
    </div>
</div>