Table

1. 테이블 요소

테이블에 들어갈 내용에 따라 버튼과 아이콘등의 요소등의 배치가 변경되어 추가적으로 들어가면 됩니다. (테이블 내에서 사용되는 버튼은 아이콘 형태와 text 버튼을 사용하길 권장합니다.)

<테이블에 활용된 심볼예시>

2. 테이블 예시

테이블은 내용에 따라 리스트에서 사용되는 심볼이 달라집니다. 테이블의 리스트의 높이는 최소 값(심볼기준)을 지키도록 하고 텍스트가 2줄일 경우 높이에 대한 가이드가 필요합니다.

2-1 테이블

HTML

<table class="tb-col-view">
	<colgroup>
		<col width="8%">
		<col width="14%">
		<col width="9%">
		<col width="10%">
		<col width="21%">
		<col width="10%">
		<col width="10%">
		<col width="10%">
		<col width="8%">
	</colgroup>
	<thead>
		<tr>
			<th scope="col">선택</th>
			<th scope="col">타이틀 1</th>
			<th scope="col">타이틀 2</th>
			<th scope="col">타이틀 3</th>
			<th scope="col">서비스</th>
			<th scope="col">아이콘</th>
			<th scope="col">버튼</th>
			<th scope="col">상태 승인</th>
			<th scope="col" class="c-align">편집</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>승인 대기</td>
			<td><a href="#none">오산시대기질모니터링서비스</a></td>
			<td>실외 미세먼지</td>
			<td>serial_number_03t</td>
			<td>대기질 모니터링 서비스 곤지암 물류센터 진동센서</td>
			<td>김성혜 (SK Planet)</td>
			<td>2020.02.30. 03:09</td>
			<td>-</td>
			<td class="c-align"><button type="button" class="ins-btn edit">수정 버튼</button></td>
		</tr>
		<tr>
			<td>승인</td>
			<td><button type="button">오산시대기질모니터링서비스</button></td>
			<td>실외 미세먼지</td>
			<td>serial_number_03t</td>
			<td>대기질 모니터링 서비스 곤지암 물류센터 진동센서</td>
			<td>이지훈</td>
			<td>2020.02.30. 03:09</td>
			<td>2020.02.30. 03:09</td>
			<td class="c-align"><button type="button" class="ins-btn edit">수정 버튼</button></td>
		</tr>
	</tbody>
</table>

CSS

/* table column view */
.tb-col-view {width:100%;margin-top:2rem;margin-bottom:4rem;table-layout:fixed;}
.tb-col-view tr:hover {cursor:pointer;background-color:#f9f9f9;}
.tb-col-view thead th {border-top:1px solid #ccc;border-bottom:1px solid #eee;padding:1.1rem 0 1.1rem 3rem;font-size:1.2rem;line-height:1.8rem;color:#666;text-align:left;background-color:#f9f9f9;}
.tb-col-view tbody td {overflow:hidden;border-bottom:1px solid #eee;padding:1.1rem 0 1.1rem 3rem;font-size:1.4rem;line-height:3.6rem;vertical-align:top;color:#111;white-space:nowrap;text-overflow:ellipsis;}
.tb-col-view.v-line tbody td {vertical-align:middle;}
.tb-col-view tbody td a {color:#111;}
.tb-col-view tbody .msg-txt {padding:23rem 0 13rem 0;border-bottom:none;font-size:1.4rem;line-height:2rem;color:#999;text-align:center;}
.tb-col-view tbody .msg-txt.short-type {padding:15rem 0 5rem 0;}
.tb-col-view tbody .other-msg-txt {border-bottom:1px solid #ccc;text-align:center;color:#666;}
.tb-col-view tbody tr.solo-tr td {border-bottom:1px solid #ccc;}
.tb-col-view a, .tb-col-view button {display:inline-block;text-align:left;}
.tb-col-view thead th.c-align, .tb-col-view tbody td.c-align {padding-left:0;padding-right:0;text-align:center;}
.tb-col-view .multi-line {padding:0.9rem 0;line-height:2rem;white-space:normal;}
.tb-col-view .ins-btn {position:relative;display:inline-block;overflow:hidden;width:3.6rem;height:3.6rem;text-indent:-999.9rem;vertical-align:middle;}
.tb-col-view .ins-btn:before {position:absolute;left:50%;top:50%;content:'';width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;background-repeat:no-repeat;background-size:auto 2.4rem;}
.tb-col-view .ins-btn.edit:before {background-image:url('../images/set_ico_edit.png');}
.tb-col-view .ins-btn.edit:hover:before {background-position:-2.4rem 0;}
.tb-col-view .ins-btn.del:before {background-image:url('../images/set_ico_tools.png');background-position:-4.8rem 0;}
.tb-col-view .ins-btn.del:hover:before {background-position:-2.4rem 0;}
.tb-col-view .ins-btn.cert:before {background-image:url('../images/set_ico_manual.png');}
.tb-col-view .ins-btn.cert:hover:before {background-position:-2.4rem 0;}
.tb-col-view .ins-btn:hover {border-radius:3.6rem;background-color:#e1eeff;}

@ Pagination

2-2 페이징

HTML

<div class="set-btn-page">
    <button type="button" disabled="disabled" class="arrow-btn prev">이전 페이지로 이동</button>
    <button type="button" class="current">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
    <button type="button">4</button>
    <button type="button">5</button>
    <button type="button" class="arrow-btn next">다음 페이지로 이동</button>
</div>

CSS

/* set button page */
.set-btn-page {
		display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;height:4rem;
		justify-content:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-box-pack:center;-webkit-box-pack:center;-ms-flex-pack:center;
	}
	.set-btn-page .arrow-btn {position:relative;overflow:hidden;text-indent:-999.9rem;}
	.set-btn-page .arrow-btn:before {position:absolute;left:50%;top:50%;content:'';width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;background:url('../images/set_ico_pg_arrow.png') no-repeat;background-size:auto 2.4rem;}
	.set-btn-page .arrow-btn.prev {margin-right:1.6rem;}
	.set-btn-page .arrow-btn.next {margin-left:1.6rem;}
	.set-btn-page .arrow-btn.prev:before {background-position:0 0;}
	.set-btn-page .arrow-btn.next:before {background-position:-2.4rem 0;}
	.set-btn-page .arrow-btn.prev:disabled:before {background-position:-4.8rem 0;}
	.set-btn-page .arrow-btn.next:disabled:before {background-position:-7.2rem 0;}
	.set-btn-page button {display:block;width:4rem;height:4rem;color:#999;font-size:1.4rem;}
	.set-btn-page button.current {color:#111;}
	.set-btn-page button:hover {border-radius:4rem;color:#111;background-color:#f5f5f5;}
	.set-btn-page .arrow-btn:disabled:hover {cursor:default;background-color:transparent;}