Hello, World!
이전 목록 다음
채택완료

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

달달료라
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 9,106

Copy 
<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개 / 댓글 2개

채택된 답변
+20 포인트
웅푸
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

아니그럴것이면

 border: 1px solid #BDBDBD;

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

답변에 대한 댓글 2개

달료라
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
td 안에 값이 들어가게 되면, 테두리가 나타나게 해야 되서요~ border 를 지우면, 값이 잇어도 테두리가 지워져서요~
웅프
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
#table10 td:empty {
border: none;
height: auto;
padding: 0;
}
//이렇게 한번해보시겟어요 만약이게 먹히지않는다면 스크립트처리하는 수밖에 없을듯하네요 일단해보세요 화이팅
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

 

Copy 
<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>
wwwiz
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

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

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

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

답변을 작성하려면 로그인이 필요합니다.