SIR
목록으로

table이 왜 안될까요? ㅜ 채택완료

히햐
프로필 보기이 회원 글보기이 회원의 댓글보기
 3개월 전 조회 695
답변 4
목록

Copy 
<table>

    <tbody>

        <tr>

            <th scope="row">15 - 16</th>

            <td rowspan="3">3줄</td>

            <td rowspan="4">내용내용</td>

            <td rowspan="2">내용내용</td>

            <td rowspan="2">내용내용</td>

        </tr>

        <tr>

            <th scope="row">16 - 17</th>

        </tr>

        <tr>

            <th scope="row" rowspan="2">17 - 18</th>

            <td rowspan="2">&nbsp;</td>

            <td rowspan="2">&nbsp;</td>

        </tr>

        <tr>

            <td>&nbsp;</td>

        </tr>

    </tbody>

</table>

 

이렇게 넣으면 왜 

17-18 다음 <tr>이 다음줄로 나오지 않고  17-18줄에 같이 묶이는거 왜그런건가요? 

제발 도와주세요,,,,,,,,,,,,,,,,,,,

#그누보드5 #html #css

답변 4개

채택된 답변
+20 포인트

안되는 이유는 마지막 셀이 물리적으로 rowspan 할 공간이 없기 때문입니다.

아래 코드를 보세요

 

Copy 
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}

td {
border: 1px solid #000;
padding: 10px;
text-align: center;
height: 40px;
}


</style>
<table>
  <tr>
    <td>1</td>
    <td rowspan="3">2</td>
    <td rowspan="4">3</td>
    <td rowspan="2">4</td>
    <td rowspan="2">5</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td rowspan="2">4</td>
    <td>8</td>
  </tr>
  <tr>
    <td>2</td>
    <td>9</td>
  </tr>
</table>

 

3698860916_1759132063.4917.png

 

위 코드를 보면 이렇습니다.

여기서 8 에 rowspan="2" 를 주고 9 를 삭제하면 되겠네?

라고 생각할수 있겠지만

 

그렇게 하면

 

3698860916_1759132113.0522.png

 

이렇게 되죠. table 구조는 row 기반으로 짜여지는데

현재 구조상 물리적으로 3개 이상의 열이 존재하지 않기 때문에 4번째 열이 들어갈 공간이 없습니다.

rowspan 은 열이 없다면 그 임계값 이상은 무시해버리는 특성이 있습니다.

 

그래서 5개의 행을 사용하지만 가상의 6번째 행을 추가해줘야 합니다.

 

Copy 
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}

td {
border: 1px solid #000;
padding: 10px;
text-align: center;
height: 40px;
}


</style>
<table>
  <tr>
    <td>1</td>
    <td rowspan="3">2</td>
    <td rowspan="4">3</td>
    <td rowspan="2">4</td>
    <td rowspan="2">5</td>
    <td style="border:0px;width:0px;"></td>
  </tr>
  <tr>
    <td>1</td>
    <td style="border:0px;width:0px;"></td>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td rowspan="2">4</td>
    <td rowspan="2">8</td>
    <td style="border:0px;width:0px;"></td>
  </tr>
  <tr>
    <td>2</td>
    <td style="border:0px;width:0px;"></td>
  </tr>
</table>

 

3698860916_1759132575.3093.png

 

이렇게요.

마지막 6번째 행은 보여지면 안되므로 border 값과 너비를 없앴습니다.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

자세한 설명과 답변 감사합니다!!!!!!!!!!!!!!!
더미 셀 추가 방식

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

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

 

Copy 
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table th, table td {
    border: 1px solid #ccc;
}

hr {
    margin: 2em 0;
}


table.tbl-tr-h tr {
    height: 1.2em;
}
</style>

 

<table>
    <tbody>
        <tr>
            <th scope="row">15 - 16</th>
            <td rowspan="3">3줄</td>
            <td rowspan="4">내용내용</td>
            <td rowspan="2">내용내용</td>
            <td rowspan="2">내용내용</td>
        </tr>
        <tr>
            <th scope="row">16 - 17</th>
        </tr>
        <tr>
            <th scope="row" rowspan="2">17 - 18</th>
            <td rowspan="2"> </td>
            <td rowspan="2"> </td>
        </tr>
        <tr>
            <td> </td>
        </tr>
    </tbody>
</table>

 

<hr>

 

<table class="tbl-tr-h">
    <tbody>
        <tr>
            <th scope="row">15 - 16</th>
            <td rowspan="3">3줄</td>
            <td rowspan="4">내용내용</td>
            <td rowspan="2">내용내용</td>
            <td rowspan="2">내용내용</td>
        </tr>
        <tr>
            <th scope="row">16 - 17</th>
        </tr>
        <tr>
            <th scope="row" rowspan="2">17 - 18</th>
            <td rowspan="2"> </td>
            <td rowspan="2"> </td>
        </tr>
        <tr>
            <td> </td>
        </tr>
    </tbody>
</table>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

이렇게도 해봤는데 안되더라구요ㅜㅜ
tr 높이 지정 방식

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

1889254122_1759128197.8039.png

 

엑셀로 구현해봤습니다.

이렇게 나와야하는데 도통 구현이 안돼서요 ㅠㅠ

로그인 후 평가할 수 있습니다

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

Copy 
<table border="1">
  <tbody>
    <tr>
      <th scope="row">15 - 16</th>
      <td rowspan="3">3줄</td>
      <td rowspan="4">내용내용</td>
      <td rowspan="2">내용내용</td>
      <td rowspan="2">내용내용</td>
    </tr>
    <tr>
      <th scope="row">16 - 17</th>
    </tr>
    <tr>
      <th scope="row">17 - 18</th>
      <td rowspan="2"> </td>
      <td rowspan="2"> </td>
    </tr>
    <tr>
      <th scope="row">18 - 19</th>
      <td> </td>
    </tr>
  </tbody>
</table>
15 - 16 3줄 내용내용 내용내용 내용내용
16 - 17
17 - 18    
18 - 19  
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

맨 마지막 줄은 3줄이라고 적힌 칸 바로 아래에 단독으로 나와야하는 칸이에요ㅠㅠ 18-19칸은 그 아래에 있고요
그림판으로 그려서 첨부하시면 고수님들 한번에 알아보실 듯 해요.

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

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

로그인
🐛 버그신고