테이블 조건에 따른 테두리 표시 채택완료
달료라
1년 전
조회 8,693
</p>
<p><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; </p>
<p>}</p>
<p>td {
border: 1px solid #BDBDBD;
padding: 0 10px 0 10px;
font-family: "Noto Sans KR", sans-serif;
font-size: 15px;</p>
<p> height: 80px;
}
</style></p>
<p><style>
#table10 td:empty {
border: none;</p>
<p>}
#table10 th:empty {
border: none;
}</p>
<p></style></p>
<p>이렇게 테이블에 스타일을 먹였는데, td 안에 값이 없으면, 라인이 표시 되지 않게 하였는데,
td 스타일에 높이를 위처럼 설정 하니 값이 없어도, 테두리가 다 표시가 됩니다.
혹시 높이를 설정 해도 테두리가 나타나지 않게 하는 방법이 있을까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
답변에 대한 댓글 2개
�
달료라
1년 전
td 안에 값이 들어가게 되면, 테두리가 나타나게 해야 되서요~ border 를 지우면, 값이 잇어도 테두리가 지워져서요~
�
웅프
1년 전
#table10 td:empty {
border: none;
height: auto;
padding: 0;
}
//이렇게 한번해보시겟어요 만약이게 먹히지않는다면 스크립트처리하는 수밖에 없을듯하네요 일단해보세요 화이팅
border: none;
height: auto;
padding: 0;
}
//이렇게 한번해보시겟어요 만약이게 먹히지않는다면 스크립트처리하는 수밖에 없을듯하네요 일단해보세요 화이팅
댓글을 작성하려면 로그인이 필요합니다.
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><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></p>
<p> </p>
<p><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></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인