[HTML][CSS] table로 게시판 만들고 css 적용

● table로 게시판을 만들 시 td 같은경우 일괄적으로 css를 적용한다.

이 중 하나의 td만 다른 css를 사용하고 싶을 때는 해당 td에 class를 따로 줘서 css적용시키기

 

예시1)

<td>거래처명</td>
<td>대표자</td>
<td>주소</td>
<td>전화</td>
<td class="zcom_right">잔액</td>

 

 

예시2) 

<tbody>
	<tr>
            <td><?php echo ($i) ?></td>
            <td><?php echo $row['cname'] ?></td>
            <td><?php echo $row['ceo'] ?></td>
            <td class="zcom_address"><?php echo $row['address'] ?></td>
            <td><?php echo $row['tel'] ?></td>
            <td><?php echo number_format($row['tmoney']) ?></td>
            ...

 

이때 

해결책 1 : 자식으로 타고들어가서 정렬

.zcom_head01 tbody .zcom_address{text-align: left;}

 

해결책 2 : flex를 이용한 정렬

.zcom_address {display: flex;margin-left: auto; align-items: center;}

 

 

 

● css적용 시 순서 유의.

 

만약

.zcom_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all;text-align: center;}
.zcom_head01 thead {background-color: #f4f4f4; text-align: center;font-weight: bold;}
.zcom_head01 thead td {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px; font-weight: bold;}

이 순서라면

.zcom_head01 의 모든 td를 일괄적으로 적용 시킨 css가

 

.zcom_head01 thead td 에는 적용이 되지 않는다.