html table 팁

1. 테두리 색상을 밑에만 넣고 싶으면

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

• 원하는 td나 th 선택하여 border-bottom 적용

  
  

  ---

2. 셀 블록마다 width를 설정 가능.

<table>
  <tr>
    <td class="name">상품명</td>
    <td class="price">가격</td>
    <td>수량</td>
  </tr>
</table>

.name {
  width : 50%
}
.price {
  width : 20%
}

하나의 td에 width를 주면 전체 열의 width가 변함.

---

3. td 여러개 합치기

<td colspan="4"></td>

colspan에 원하는 숫자를 넣으면 그만큼 합쳐짐.

---

table 태그에 border-radius가 안먹을 때 1.

table {
  border-collapse : collapse;
  border-spacing : 0;
}

(왼쪽위에있는 td) {
  border-top-left-radius : 5px;
}