테이블 조건에 따른 테두리 표시
본문
<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;
를 지워버리면되는것아닌가요?
td 안에 값이 들어가게 되면, 테두리가 나타나게 해야 되서요~ border 를 지우면, 값이 잇어도 테두리가 지워져서요~
#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>
답변을 작성하시기 전에 로그인 해주세요.
