테이블 이어붙이기 or 테이블 td, th 태그에 여백속성뿐만아니라 속성값 아예 안준다는 마인드
아래와 같은 방식보단 colspan 같은거 사용하면서 tr > td 안에 리스트 넣고 해당 리스트 on/off로 만드는게 난거 같다.
td에는 여백관련 속성은 주지말자.
안에 리스트 height:0 되었을 때 td 여백때문에 간격 벌어지게되니까..
<div class="table_head">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">방향</th>
<th scope="col">Ether 타입</th>
<th scope="col">원격</th>
</tr>
</thead>
</table>
</div>
<!-- 여기다가 리스트 넣고 -->
<div class="list">
<ul class="">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="table_body scroll">
<table class="table table-hover">
<thead>
<tr class="hide">
<th scope="col">방향</th>
<th scope="col">Ether 타입</th>
<th scope="col">원격</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
<tr>
<td scope="row" class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-center">
<div class="table_20">
수신
</div>
</td>
<td class="text-left">
<div class="table_20">
수신
</div>
</td>
</tr>
</tbody>
</table>
</div>