테이블 조건에 따른 테두리 표시

테이블 조건에 따른 테두리 표시

QA

테이블 조건에 따른 테두리 표시

본문


<style>
  table10 {
    width: 100%;
    border: 1px solid #BDBDBD;
    border-collapse: collapse;
  }
th {
    border: 1px solid #BDBDBD;
   padding: 0 10px 0 10px;
   font-family: "Noto Sans KR", sans-serif;
   font-size: 15px; 
}
td {
    border: 1px solid #BDBDBD;
   padding: 0 10px 0 10px;
   font-family: "Noto Sans KR", sans-serif;
   font-size: 15px;
   height: 80px;
  }
</style>
<style>
#table10 td:empty {
  border: none;
}
#table10 th:empty {
  border: none;
}
</style>

이렇게 테이블에 스타일을 먹였는데, td 안에 값이 없으면, 라인이 표시 되지 않게 하였는데, 

td 스타일에 높이를 위처럼 설정 하니 값이 없어도, 테두리가 다 표시가 됩니다. 

 

혹시 높이를 설정 해도 테두리가 나타나지 않게 하는 방법이 있을까요?

이 질문에 댓글 쓰기 :

답변 3

아니그럴것이면

 border: 1px solid #BDBDBD;

를 지워버리면되는것아닌가요?

#table10 td:empty {
  border: none;
  height: auto;
  padding: 0;
}
 //이렇게 한번해보시겟어요 만약이게 먹히지않는다면 스크립트처리하는 수밖에 없을듯하네요 일단해보세요  화이팅

요점은 td 안에 내용이 있을 경우 테두를 보여주고 내용이 없을 경우 테두리를 보여주지 않겠다 이건가요?

이게 맞다면 td에 border를 주지 마시고 

내용이 있을 경우 td span 내용으로 작성 후 

Td+span 일때 border를 주시면 되지 않을까 합니다

다음 코드가 도움이 될지 모르겠습니다.

 


<style>
  #table10 {
    width: 100%;
    /* border: 1px solid #BDBDBD; */
    border-collapse: collapse;
  }
th {
    border: 1px solid #BDBDBD;
   padding: 0 10px 0 10px;
   font-family: "Noto Sans KR", sans-serif;
   font-size: 15px; 
}
td {
    border: 1px solid #BDBDBD;
   padding: 0 10px 0 10px;
   font-family: "Noto Sans KR", sans-serif;
   font-size: 15px;
   height: 80px;
  }
</style>
<style>
#table10 td:empty {
  border: none;
}
#table10 th:empty {
  border: none;
}
</style>
 
<table id="table10">
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row"></th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td></td>
    </tr>
  </tfoot>
</table>
답변을 작성하시기 전에 로그인 해주세요.
전체 30
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT