유체 테이블 행을 사용하여 XHTML "테이블"을 만드는 방법

기본적으로 상자의 격자를 만들 수 있어야합니다. 각 상자의 상단 중간과 하단에 텍스트를 정렬하고 같은 행에 상자를 넣을 수 있습니다. 행의 다른 상자에있는 텍스트가 아래로 밀면 크기가 조정됩니다.유체 테이블 행을 사용하여 XHTML "테이블"을 만드는 방법

이 HTML 4 코드를 살펴보면 내가 할 수 있기를 바라고 있지만 XHTML 1.0 doctype을 사용하여이 작업을 수행 할 수 있기를 바랍니다.

<style type="text/css"> 
<!-- 
#apDiv1 { 
     width:200px; 
     height:100%; 
      border:1px solid #000; 
} 

#apDiv1 table{ 
     width:200px; 
     height:100%; 
      border:1px solid #000; 
} 
--> 
</style> 
<div id="apDiv1"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr><td height="100%">blah</td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    <td> 
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr> 
     <td height="100%"><p>blahfhfh</p> 
      <p>dfhdf</p> 
      <p>h</p> 
      <p>dfh</p> 
      <p>df</p> 
      <p>h</p> 
<p>&nbsp;</p></td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    <td> 
     <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr><td>blah</td></tr> 
     <tr><td height="100%">blah</td></tr> 
     <tr><td>blah</td></tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%"><p>blahfhfh</p> 
      <p>dfhdf   </p> 
      <p>&nbsp;</p></td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    </tr> 
    <tr> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    <td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td>blah</td> 
     </tr> 
     <tr> 
     <td height="100%">blah</td> 
     </tr> 
     <tr> 
     <td>blah</td> 
     </tr> 
    </table></td> 
    </tr> 
</table> 
</div>

출처

2009-06-03 VADiUM

문제는 XHTML과 전혀 관련이 없습니다. Quirks 모드 대 표준 모드와 (X) HTML Strict와 (X) HTML Transitional의 차이입니다. – Kornel

첫째, 문서를 만드는 것은 http://validator.w3.org

후 사용하여, HTML 4.01 엄격한의 DOCTYPE을 가지고 처음 확인하게, 당신은

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

후 재에 DOCTYPE을 변경할 수 있습니다 그것을 확인하십시오. 다르게 행동하는 문제가있는 경우 여기에서 특정 질문에 대해 질문 할 수 있습니다.

출처

2009-06-03 07:42:52

여기에 게시 된 코드는 높이 설정 때문에 유효하지 않습니다. – voyager

a cross-browser way to achieve grid using CSS은 display:inline-block이지만, 원하는만큼 융통성이 없을 수 있습니다. (Firefox 2를 지원하려면 코드가 꽤 추합니다.)

"XHTML"문제는 height:100%을 사용할 수있을 때 IE5 버그 (DOCTYPE을 사용하지 않거나 이전/불완전한 것을 사용하는 경우)를 모방하지 않는 CSS가 제한된다는 것입니다.

부모 요소의 높이가 auto이면 높이가 작동하지 않으며 기본적으로 거의 모든 HTML 요소에 자동 높이가 있습니다. 표의 모든 상위 요소에 명시적인 높이를 설정해야합니다.

html,body,#apDiv1 { 
    height:100%; 
}

출처

2009-06-07 18:34:01 Kornel

유체 테이블 행을 사용하여 XHTML "테이블"을 만드는 방법

답변

관련 문제