반응형 웹에서 테이블 처리는 어떻게 해야 할까?

반응형에서 table을 쓰지 않고, ul li 또는 div로 만드는 경우가 많다. 그러나 table이 반드시 필요한 예도 있다. 그럴 때 사용할 수 있는 두 가지 방법을 소개한다. 여러 가지로 응용이 가능하니 나만의 표를 만들어 보길 바란다 :)

no scroll

스크롤 없이 깔끔하게 표를 만들고 싶을 때, 또는 게시판에서 사용하는 방법이다.

PC 버전 MOBILE

<table class="basic_table ctable">
	<caption>국내현황 코로나 확진</caption>
	<thead>
		<tr>
			<th scope="col">위치</th>
			<th scope="col">누적확진</th>
			<th scope="col">신규확진</th>
			<th scope="col">인구 10만명당</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row" data-label="위치">경기</th> <!--data-label로 테이블의 제목 표출-->
			<td data-label="누적확진">3,120,770</td>
			<td data-label="신규확진">87,667</td>
			<td data-label="인구 10만명당">23,005</td>
		</tr>
		<tr>
			<th scope="row" data-label="위치">서울</th>
			<td data-label="누적확진">2,393,995</td>
			<td data-label="신규확진">66,915</td>
			<td data-label="인구 10만명당">25,175</td>
		</tr>
		.
		.
		.
		<tr>
			<th scope="row" data-label="위치">세종</th>
			<td data-label="누적확진">75,297</td>
			<td data-label="신규확진">3,486</td>
			<td data-label="인구 10만명당">20,247</td>
		</tr>
		<tr>
			<th scope="row">검역</th>
			<td>10,553</td>
			<td>13</td>
			<td>-</td>
		</tr>
	</tbody>
</table> 

@media all and (max-width: 800px) {
	.mTable caption {
		font-size: 1.3em;
	}

	.mTable {
		border: 0;
	}

	.mTable thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.mTable th {
		display: block;
	}

	.mTable tr {
		border-top: 3px solid gray;
		border-bottom: 3px solid #ddd;
		display: block;
		margin-bottom: .625em;
	}

	.mTable td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: .8em;
		text-align: right;
	}

	.mTable td::before {
		content: attr(data-label); /*data-label을 가상요소 표출*/
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}

	.mTable td:last-child {
		border-bottom: 0;
	}
}

scroll

정보가 많아서 스크롤이 있어야 하는 표에서 사용하는 방법이다.

PC 버전 MOBILE 버전

<div class="flip-scroll"> <!--div로 table을 감싸준다-->
    <table class="basic_table">
		<caption>국내현황 코로나 확진</caption>
        	<thead>
			<tr>
				<th scope="col">위치</th>
				<th scope="col">누적확진</th>
				<th scope="col">신규확진</th>
				<th scope="col">인구 10만명당</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">경기</th>
				<td>3,120,770</td>
				<td>87,667</td>
				<td>23,005</td>
			</tr>
			<tr>
				<th scope="row">서울</th>
				<td>2,393,995</td>
				<td>66,915</td>
				<td>25,175</td>
			</tr>
			.
			.
			.
			<tr>
				<th scope="row">세종</th>
				<td>75,297</td>
				<td>3,486</td>
				<td>20,247</td>
			</tr>
			<tr>
				<th scope="row">검역</th>
				<td>10,553</td>
				<td>13</td>
				<td>-</td>
			</tr>
		</tbody>
	</table> 
</div>

@media all and (max-width: 800px) {
	.fsMtable table {
		width: 100%;
		border-right: 1px solid #dfdfdf;
		display: block;
	}

	.fsMtable thead { /*가로로 만들어진 셀을 세로로 변경*/
		display: block;
		float: left;
	}

	.fsMtable tbody {
		display: block;
		width: auto;
		position: relative;
		overflow-x: auto;
		white-space: nowrap;
	}

	.fsMtable thead tr {
		display: block;
	}

	.fsMtable th {
		display: block;
		text-align: right;
	}

	.fsMtable tbody tr {
		display: inline-block;
		vertical-align: top;
	}

	.fsMtable td {
		display: block;
		min-height: 1.25em;
		text-align: left;
	}

	.fsMtable th {
		border-bottom: 0;
		border-left: 0;
	}

	.fsMtable td {
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}

	.fsMtable tbody tr {
		border-left: 1px solid #babcbf;
		margin-left: -5px
	}

	.fsMtable th:last-child,
	.fsMtable td:last-child {
		border-bottom: 1px solid #dfdfdf;
	}
}