Table 실습

🤣🤣🤣제발 이거보고 따라치지말고 혼자 힘으로 해보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <div class="cart-background">

        <h3>Your shopping cart</h3>
        <table class="cart-table">
            <thead>
                <tr>
                    <th></th>
                    <th class="cell-long">Item</th>
                    <th>Amount</th>
                    <th>Price</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="img/camera01.png" style="width: 50px"></td>
                    <td>카메라</td>
                    <td>1</td>
                    <td>7000</td>
                    <td>7000</td>
                </tr>
                <tr>
                    <td><img src="img/camera02.png" style="width: 50px"></td>
                    <td>카메라</td>
                    <td>1</td>
                    <td>7000</td>
                    <td>7000</td>
                </tr>
                <tr>
                    <td colspan="5" style="text-align:right;">총 가격 : 14000</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>


.cart-background{
    width: 100%;
    background-color: #c2d3de;
    padding: 30px;
}

.cart-table {
    width: 100%;
    max-width: 700px;
    margin: auto;
    background: white;
    border-radius: 10px;
}

.cart-table td , .cart-table th{
    padding: 15px;
    border-bottom: 1px solid #c2d3de;

}

/*
.cell-long {
    width: 700px;
}
*/

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

nth-child 셀렉터

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

여러 요소를 찾은 다음

원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다.

위의 코드는 그래서 .cart-table 안에 있는 모든 td를 찾은 다음

2번째 나오는 td에만 width를 변경 할 수 있습니다.

.cart-table td:nth-child(even) {
  color: red;
}

이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고

(odd라고 쓰면 홀수입니다)

테두리 색상은 밑에만 넣고 싶으면

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

셀 블록마다 width를 설정해줄 수 있습니다.

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

<style>
.name {
  width : 50%
}
.price {
  width : 20%
}
</style>

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

td 여러개를 합치고 싶으면

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

간혹 border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우가 있습니다.

그럴 때 사용할만한 방법들을 소개해드립니다.

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

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

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

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

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

box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법입니다.

PreviousTable 레이아웃 Nextpseudo-class

Last updated 1 year ago