th에 width 다르게 줄 때 th:nth-child(n)

- ITEM 칸을 길게 확보하고 싶을 때  ITEM 칸의 th에 클래스명 cell-long 을 넣고 아래와 같이 width 설정 할 수 있다.

<!--HTML-->
<tr>
  <th></th>
  <th class="cell-long">Item</th>
  <th>Amount</th>
  <th>Price</th>
  <th>Total</th>
</tr>
 
/* CSS */
.cell-long {
  width: 140px; 
}

- td에 설정하는 width는 max-width라고 생각하면 좋다.

같은 행의 다른 td의 기본 width를 보존하는 범위에서 최대한 ~ 지정한 width 까지 확장된다는  뜻이다.

 

- 한 행의 td에 width 설정하면 자연스럽게 같은열의 td의 width에 모두 적용된 것과 같다.

 

 

- 그러나 :nth-child(n)를 사용하면 굳이 클래스를 하나 달지 않아도 ITEM 칸에 CSS를 적용할 수 있다. 

See the Pen th:nth-child(2) by JEONG (@cona) on CodePen.

.cart-table th:nth-child(2){
  width: 140px; 
}

  cart-table 클래스 하위의 th 중에 2번째 자식에 width를 140px 로 준다.

 

 

 

 

 

cf. 테두리를 밑에만 설정하고 싶으면 border-bottom 사용한다.

td, th {
  border-bottom : 1px solid black;
}