- 정보공유
[퍼블리싱] 반응형 테이블
CSS (부트스트랩기반의 추가코드)
@media (max-width: 480px) {
.table-info colgroup col {width:100%;}
.table-info th, .table-info td {display:block}
.table-info th {border-bottom:0 !important;}
}
HTML
<div class="table-info">
<table class="table table-bordered">
<caption></caption>
<colgroup>
<col width="15%"/>
<col width="35%"/>
<col width="15%"/>
<col width="35%"/>
</colgroup>
<tbody>
<tr>
<th>응시안내</th>
<td colspan="3">999</td>
</tr>
<tr>
<th>출제자</th>
<td>989787</td>
<th>문항수</th>
<td>10 문항</td>
</tr>
<tr>
<th>시험시간</th>
<td>20 분</td>
<th>타입</th>
<td>999</td>
</tr>
</tbody>
</table>
</div>