Table Tr 요소 사이에 간격

오늘은 이미 완료된 프로젝트 진행 중에 장비별 용량 표시를 나타내는 teble에서
마지막만 전체 교체 부분만 위에 띄어서 혼자 놔둘 수 없겠냐고 물어보았다.
(그렇다 이 회사에 퍼블리셔는 나뿐이다 :)
이미 진행 완료된 프로젝트도 유지 보수가 필요하기에 도맡아 하고 있는데
이건 별것 아닐 수 있지만 기록하여 앞으로 이런 일 있을 때 써먹으려 한다.
일단 Table 간격을 조정할 수 있는 태그는

border-collapse: separate | collapse | initial | inherit 있으며,

separate : table의 테두리와 셀의 테두리 사이에 간격을 생성

(separate 간격의 크기는 border-spacing으로 가능)

collapse : table의 테두리와 셀의 테두리 사이의 간격을 제거

initial : 기본값

inherit : 부모 요소의 속성값을 상속

Table Tr 요소 사이에 간격 적용하기
2가지 방법이 있다!

첫번째! border-spacing
이 방법은 가장 쉽고 간단하다. border-spacing은 단일 값 또는 각각 간격을 조정하는 것이 가능! 만약 위아래에만 10px 간격을 만들 경우 아래와 같이 이 속성을 table 태그에 사용된다.

기본에서

.table {
   border-collapse: separate;
   border-spacing: 10px 10px;
 }

를 넣어준다.

이경우 다같이 적용되기에 하나를 떨어뜨리는데 쓸 수 없으니 패스~~

두번째! 빈 tr 태그
비어있는 tr 태그를 넣어야 하므로 코드가 지저분해질 수 있지만 하나만 띄어야 할 때는간단하게 가능하다.
빈 태그를 넣지 말라고 하는 분들이 있을 수 있으니 주의
(여쭤보니 상관없다고 하여 나는 빈 태그를 삽입하여 만들었다!!)

일단 빈 tr 을 만들어 td에 맞는 colspan 꼭 해주자! class 도 추가하기
여백class를 추가하고 padding으로 조절하며 border를 없애주면

.table tr td.space {
    padding: 10px 0;
    border:none;
}

간단하게 해결 된다!

하나의 tr만 띄울 일이 별로 없지만 혹시나 그런 경우에는
빈 태그를 이용하면 간단하게 가능하다.
border가 없는 경우에는
띄우고자 하는 tr에 border-top:10px solid 해당 배경값
으로 눈속임으로 띄운 것 처럼 보이게도 가능하다.