스크립트 & 소스코드 공유

HTML

<div id="custom-responsive-table">
<table class="table">
<thead class="bg-light">
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
</tr>
</thead>
<tbody>
<tr>
<td data-title="h1">content1</td>
<td data-title="h2">content2</a></td>
<td data-title="h3">content3</td>
<td data-title="h4">content4</td>
</tr>
<tr>
<td data-title="h1">second1</td>
<td data-title="h2">second2</td>
<td data-title="h3">second3</td>
<td data-title="h4">second4</td>
</tr>
</tbody>
</table>
</div>
<p>https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table</p>

CSS

/*반응형 테이블*/
@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#custom-responsive-table table,
#custom-responsive-table thead,
#custom-responsive-table tbody,
#custom-responsive-table th,
#custom-responsive-table td,
#custom-responsive-table tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#custom-responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

#custom-responsive-table tr { border: 1px solid #ccc; }

#custom-responsive-table td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%; /*컬럼위치조정*/
white-space: normal;
text-align:left;
}

#custom-responsive-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

/*
Label the data
*/
#custom-responsive-table td:before { content: attr(data-title); }
}