HTML - 중첩 테이블에 행 넣기

다음은 2 행 3 열의 중첩 테이블을 만드는 코드입니다. 이 문제는베이스 테이블이다 EXPECTED OUTPUT HTML - 중첩 테이블에 행 넣기

예상 된

<html> 
<body> 
<h4>Two rows and three columns:</h4> 
<table border="1" width="100%" height="400" align="top"> 
<tr> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>1-1</td> 
     <td>1-2</td> 
    </tr> 
    <tr> 
     <td>1-3</td> 
     <td>1-4</td> 
    </tr> 

    </table> 

</td> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>2-1</td> 
     <td>2-2</td> 
    </tr> 
    <tr> 
     <td>2-3</td> 
     <td>2-4</td> 
    </tr> 

    </table> 

<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>3-1</td> 
     <td>3-2</td> 
    </tr> 
    <tr> 
     <td>3-3</td> 
     <td>3-4</td> 
    </tr> 
    </table> 
</td> 
</tr> 
<tr> 
</td> 
    <td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>4-1</td> 
     <td>4-2</td> 
    </tr> 
    <tr> 
     <td>4-3</td> 
     <td>4-4</td> 
    </tr> 
</table> 
<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>5-1</td> 
     <td>5-2</td> 
    </tr> 
    <tr> 
     <td>5-3</td> 
     <td>5-4</td> 
    </tr> 
    </table> 
<td> 
    <table width="100%" border="2" height ="100" align="top"> 
    <tr> 
     <td>6-1</td> 
     <td>6-2</td> 
    </tr> 
    <tr> 
     <td>6-3</td> 
     <td>6-4</td> 
    </tr> 
    </table> 
</body> 
</html>

CURRENT OUTPUT WHICH IM GETTING NOW

생성 얻고 내부 테이블은 중간에 공간을 많이 가지고있다. 내 요구 사항은 두 개의 행이 있고 첫 번째 두 행 사이에 공백이 있으면 안됩니다. 첫 번째 두 행 뒤에있을 수있는 공백이 있으면. 첨부 된 이미지를 참조하십시오. (두 번째 이미지는 스케일 된 것입니다. 스케일링을 무시하십시오)

기본 테이블 높이를 변경하지 않고 그것을하고 싶었습니다. 즉 기본 표 높이를 400으로 만 설정하면됩니다. DoctorMick의 아래 문제를 해결하기 위해 Firefox 나 Mozilla가 아닌 IE6에서만 작동합니다.

출처

2012-03-07 m4n07

처럼 사용 (기본적으로 단지 최소 높이이다로서 사용될 것이다) 낮은 번호 (외부 테이블에서) 위쪽 행의 높이, 즉

<tr style="height: 1">

세트

하고 당신은 서브 테이블 정렬 = "상단"을 제거 할 수있는, 즉

<tr style="vertical-align: top">

을 (외부 테이블) 번째 행의 수직 정렬 CSS 속성을 설정.

전체 예 ...

<html> 
    <body> 
    <h4>Two rows and three columns:</h4> 
     <table border="1" width="100%" height="400" align="top"> 
     <tr style="height: 1"> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>1-1</td> 
       <td>1-2</td> 
       </tr> 
       <tr> 
       <td>1-3</td> 
       <td>1-4</td> 
       </tr> 
      </table> 
      </td> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>2-1</td> 
       <td>2-2</td> 
       </tr> 
       <tr> 
       <td>2-3</td> 
       <td>2-4</td> 
       </tr> 
      </table> 
      <td> 
      <table width="100%" border="2" height ="100" align="top"> 
       <tr> 
       <td>3-1</td> 
       <td>3-2</td> 
       </tr> 
       <tr> 
       <td>3-3</td> 
       <td>3-4</td> 
       </tr> 
      </table> 
     </td> 
     </tr> 
     <tr style="vertical-align: top"> 
     <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>4-1</td> 
       <td>4-2</td> 
       </tr> 
       <tr> 
       <td>4-3</td> 
       <td>4-4</td> 
       </tr> 
      </table> 
     <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>5-1</td> 
       <td>5-2</td> 
       </tr> 
       <tr> 
       <td>5-3</td> 
       <td>5-4</td> 
       </tr> 
      </table> 
      <td> 
      <table width="100%" border="2" height ="100"> 
       <tr> 
       <td>6-1</td> 
       <td>6-2</td> 
       </tr> 
       <tr> 
       <td>6-3</td> 
       <td>6-4</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
    </table> 
    </body> 
</html>

출처

2012-03-07 13:42:50 DoctorMick

감사합니다. 귀하의 제안을 시도했으며 효과가 있습니다. – m4n07

행과 열의 수에 따라 동적으로 조정할 수 있습니까? – m4n07

다른 문제가 발생하여 Firefox 또는 Mozilla가 아닌 IE6에서만 작동합니다. – m4n07

VALIGN = TOP 스타일을 내부 테이블로 설정하십시오. 도움이되지 않으면 행에 수직 정렬을 설정하십시오.

출처

2012-03-07 13:38:34

vAlign와 = TOP가 작동되지 않았습니다. – m4n07

cellpadding 속성을 사용하여 원하는대로 표를 만듭니다. 예를 들어 첫째,이

<table border="1" cellpadding="10"> 
    <tr><td></td> 
    </tr> 
</table>

출처

2012-03-07 13:41:07 Gowti

사용이 CSS :

table{border-layout:fixed;border-spacing=0} 
td{vertical-align:top;}

출처

2012-03-07 13:44:12 amd

아니 작동하지 않습니다. 감사! – m4n07

HTML - 중첩 테이블에 행 넣기

답변

관련 문제