[Issues] table 높이 고정하기

1. 이슈 상황

• 직원목록 나오는 테이블과 페이지네이션이 연결됨
• 한 페이지 당 10개의 직원 데이터가 출력됨
• 페이지네이션 마지막 페이지의 출력 데이터가 10개 미만인 경우, 테이블 높이가 줄어들며 페이지네이션 또한 위로 붙어버림

 

 

 

2. 어떻게 해결?

• 테이블을 div로 감싸고 pagenation 영역을 띄워줄 수 있는 height값을 준다
• 테이블에 width값을 줘서 영역을 잡는다
• colgroup를 만들어서 각 col의 width 값을 준다
  • %로 설정 시, 모든 cal width의 합이 100%을 기준으로 주지말고
  • 나머지 하나는 *을 줘서 미세한 간격의 틈을 없애준다

<div class="table-wrap">
    <table>
            <colgroup>
            <col width="10%" />
            <col width="12%" />
            <col width="*" />
            <col width="25%" />
            <col width="20%" />
            <col width="15%" />
        </colgroup>
        <thead>
        ...
        </thead>
        ...
    </table>
</div>

.table-wrap {
  position: relative;
  height: 507px;
}
table {
  width: 900px;