2x2 격자 표를 HTML로 작성하는 방법

각 표를 독립적으로 접을 수있는 HTML 표 2x2를 작성하려고합니다. 나는 적절한 해결책을 찾지 못하는 것 같습니다. 예를 들어, 다소 아래의 버전이 작동하지만 불행히도 R1C1 테이블이 숨겨지면 행 2 테이블이 첫 번째 행과 조인됩니다.2x2 격자 표를 HTML로 작성하는 방법

<!DOCTYPE html> 
<!-- Attempt at a 2x2 grid of tables, each independently collapsible 
Based on following web pages (among others): 
- http://www.delphifaq.com/faq/javascript/f1030.shtml 
- http://www.w3schools.com/css/css_table.asp 
--> 
<html> 
    <head> 
    <title>2x2 table grid</title> 

    <style> 
     table, th, td 
     { 
     border-collapse:collapse; 
     border:1px solid black; 
     width=50% 
     } 
    </style> 


    <script language="JavaScript" type="text/javascript"> 
    function setDivStyle(table, style) { 
     // Set the display style 
      var tbl = document.getElementById(table); 
      tbl.style.display = style; 
     console.log(table + " display style set to " + style) 
      } 
    </script> 

    </head> 

    <body> 

    <div id="r1"> 
     <h2>Row 1</h2> 

     <div id="r1-controls"> 
    <a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a> 
    &nbsp; 
    <a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a> 
    &nbsp; 
    <a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a> 
    &nbsp; 
    <a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a> 
    <br> 
     </div> 

     <table id="r1c1" style="display: inline; float: left"> 
    <tr> 
     <th>R1C1a</th> 
     <th>R1C1b</th> 
     <th>R1C1c</th> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>d</td> 
     <td>e</td> 
     <td>f</td> 
    </tr> 
     </table> 

     <table id="r1c2" style="display: block; float: none"> 
    <tr> 
     <th>R1C2a</th> 
     <th>R1C2b</th> 
     <th>R1C1c</th> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>d</td> 
     <td>e</td> 
     <td>f</td> 
    </tr> 
     </table> 
    </div> 

    <div id="r2"> 
     <h2>Row 2</h2> 

     <div id="r2-controls"> 
    <a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a> 
    &nbsp; 
    <a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a> 
    &nbsp; 
    <a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a> 
    &nbsp; 
    <a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a> 
    <br> 
     </div> 

     <table id="r2c1" style="display: inline; float: left"> 
    <tr> 
     <th>R2C1a</th> 
     <th>R2C1b</th> 
     <th>R2C1c</th> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>d</td> 
     <td>e</td> 
     <td>f</td> 
    </tr> 
     </table> 

     <table id="r2c2" style="display: block; float: none"> 
    <tr> 
     <th>R2C2a</th> 
     <th>R2C2b</th> 
     <th>R2C1c</th> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>d</td> 
     <td>e</td> 
     <td>f</td> 
    </tr> 
     </table> 
    </div> 


    </body> 
</html>

출처

2014-02-09 Tom O' Hara

javascript:setDivStyle('r1c2', 'none');setFloat('r1c1','none');이 왜 테이블'inline' 등'block'의 일부입니다? 하나 (아마도'블록')를 골라서 붙잡아 라. 또한 인라인 스타일을 사용하거나 자바 스크립트로 스타일을 설정하지 말고 CSS를 사용하여 스타일을 설정하고 자바 스크립트를 사용하여 클래스를 전환하십시오. –

감사합니다. 인라인/블록 사용은 혼동과 일관성없는 편집의 조합이었습니다. (이에 대한 클래스 정의에 대해 살펴 보겠습니다.) –

답변으로 추가하지는 않지만 http://jsfiddle.net/Bx8Un/에 jsFiddle을 작성했습니다. 이는 수동으로 스타일을 설정하고 HTML에 자바 스크립트를 넣는 대신 (일반적으로 나쁜 습관) 토글 링 클래스를 사용하는 방법을 보여줍니다. jQuery를 사용하여 이벤트를 바인딩합니다. 순수 JS보다 쉽고 깔끔하기 때문입니다. –

이전과 비슷한 문제가있었습니다. 그것의 float:left R1C2가 숨겨져 때 행 2 위로 이동하게 원인이되고있다. 난 당신과 같이 R1C2을 숨길 때 float:left를 전환 할 또 다른 기능을 만드는 것이 좋습니다 :

function setFloat(element, style) { 
    var el = document.getElementById(element); 
    el .style.float = style; 
    console.log(element + " float style set to " + style) 
}

을하고 전화 :

출처

2014-02-09 09:28:06 User3269771

당신도 그렇게 할 필요는 없습니다. 아래의 h2 요소에'clear : both '를 적용하면 float가되지 않습니다. –

2x2 격자 표를 HTML로 작성하는 방법

답변

관련 문제