할 수없는 HTML 테이블

Question

HTML로 다음 표를 너무 쉽게 수행해야합니다.

문제는 두 번째 행에 있고 두 번째 열에는 두 개가 아닌 하나의 행만 있으며 코드는 rowspan = "2". 내 코드가 작동하지 않는 이유는 간단합니다.이 문제를 이해하지 못합니다. 정말 ...

다음은 관련 코드입니다.

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

Answer 1

며칠 전에 여기 에서 매우 유사한 질문에 답했습니다 . 분명히, 경우에 아무도 컬럼의 의도 행의 전액을 포함하지 셀 내용이 (... 음 IMO 버그 적어도 오해하지만), 브라우저 "압축"적은 행에 내용을 수 있습니다.

즉시 당신이 (그들에 적어도 당신의 세포에 더 많은 콘텐츠를 추가 할 셀 내용에 따라 높이, 변화를) 원하는 레이아웃이 렌더링 :

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3">some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here some more content in here</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

그러나 또는 셀 중 하나 또는 일부에 고정 높이를 추가하여 내용이 많지 않은 경우에도 의도 한 레이아웃을 표시 할 수 있습니다.

table {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 20px;
  text-align: center;
}

<table>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td rowspan="2" colspan="3" style="height: 80px;">X</td>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td rowspan="3">X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>