TIL 40일차

◆ 테이블

◆ 테두리 병합

• 테이블과 칸에 테두리가 두 줄로 겹쳐진 것을 병합
  - ex) border-collapse: collapse;
  

◆ 테이블, 제목, 내용 테두리가 굵어지는 효과

.table.table-border,
.table.table-border > thead > tr > th,
.table.table-border > thead > tr > td,
.table.table-border > tbody > tr > th,
.table.table-border > tbody > tr > td,
.table.table-border > tfoot > tr > th,
.table.table-border > tfoot > tr > td
{
	border: 1px solid lightgray;
}

◆ 마우스 커서 시 강조 효과

• hover 서브 스타일 (한 줄이 강조)

.table.table-hover > tbody > tr:hover {
	background-color: rgb(255, 255, 225);
    color: black;
}

• hover 서브 스타일 (한 칸이 강조)

.table.table-hover > tbody > tr
:hover {
	background-color: rgb(255, 255, 225);
    color: black;
}

◆ 테이블 가로 선

• :first-child 는 첫 번째 항목을 의미
• :nth-child(1) 는 1번째 항목을 의미
• :nth-child(2n) 는 n=1,2,3...로 변화할 때 n*2 값의 해당 순서를 선택
  - 아래와 같이 코드를 작성하면 2, 4, 6번째 칸이 강조 된다.

.table.table-striped > tbody > tr:nth-child(2n) {
	background-color: black;
	color: white;
}

• 마지막 줄은 제외하고 하려면 :not(선택자)를 붙인다.
  - 마지막 줄의 button의 테두리 강조 제외

.table.table-slit > tbody > tr:not(:last-child) {
	border-bottom: 1px black dotted;
}

• 스프링 colspan은 대체할 수 있는 디자인이 없다.

• a태그는 기본 색상이 파란색이다.

• 마우스 커서 위치시 테두리 폭이 달라지므로 테두리 색을 투명색으로 지정을 하는 것을 권장한다.

  	```html

  border: 1px solid transparent;

  	```