HTML_table 2

▶️ 테두리 색상을 특정 방향에만 넣을 경우

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

border-(방향) 속성으로 지정한다..

---

▶️ 셀 블록마다 width 지정

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

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

하나의 td에 width를 주어도 전체 열의 width가 변한다.

---

▶️ td여러개를 하나로 합치기

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

colspan에 원하는 숫자를 넣으면 그 숫자만큼 옆의 셀을 합쳐준다.

---

▶️ table 태그에 border-radius가 안먹을때

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

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

  table {
    border-collapse : collapse;
    border-radius : 7px;
    border-style : hidden;
    box-shadow : 0 0 0 1px #666;
  }

간혹 border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우가 있다. 이 경우 둘 중 한개의 방법을 적용하여 해결한다.

---