올바른 테이블 레이아웃 생성 : 예기치 않은 세포는

내가 CSS를 사용하여 동적 테이블을 생성하기 위해 노력하고있어 이동 : 본문의 내용이 동적으로 생성하고 테이블로 표시한다올바른 테이블 레이아웃 생성 : 예기치 않은 세포는

<html> 
<head> 
    <style> 
    div.el1, div.el2 { 
     color:white; 
     width:70px;height:70px; 
     border:0px; 
     padding:0px; 
     font-size: 10px; 
     font-family: "Courier"; 
    } 

    div.el1 { 
     background-color: green; 
    } 

    div.el2 { 
     background-color: orange; 
    } 

    div.tablediv { 
     display: table; 
     border:0px; 
     border-spacing:0px; 
     border-collapse:separate; 
    } 

    div.celldiv { 
     display: table-cell; 
    } 

    div.rowdiv { 
     display: table-row; 
     width:auto; 
    } 

</style> 

</head> 
<body> 

<div class="tablediv"> 
    <div class="rowdiv"> 
     <div class="celldiv"> 
      <div class="el1" id="x1y1">ABC</div> 
     </div> 
     <div class="celldiv"> 
      <div class="el2" id="x1y2"></div> 
     </div> 
    </div> 
    <div class="rowdiv"> 
     <div class="celldiv"> 
      <div class="el1" id="x2y1"></div> 
     </div> 
     <div class="celldiv"> 
      <div class="el1" id="x2y2"></div> 
     </div> 
    </div> 
</div> 

</body> 
</html>

. 데이터가 포함되어 있으면 각 셀이 아래로 이동합니다.

expected reality 
--- --- --- --- 
| | | | | | 
--- --- |ABC|--- 
| | | | | | 
--- --- --- --- 
      | | | 
      --- ---

도움이되었는데 감사드립니다. 수직 정렬 추가

EDIT 중간; div.celldiv에 문제가 해결되었지만 그 이유를 이해하지 못합니다. 특히 내용이 셀 위쪽으로 정렬되어 있기 때문에 특히 그렇습니다.

출처

2010-03-17 MrG

celldiv 안에 .el1 및 .el2 div가 있기 때문에 세로 맞춤으로 텍스트를 가운데 정렬하지 않습니다. 제거하면 실제로 작동하는지 확인할 수 있습니다. 그러나 나는 또한 수직 정렬이 이것을 수정하는 이유를 이해할 수 없다. 세밀한 수직 정렬 설정 : 바닥에있는 요소가 들어있는 밑줄은 예를 들어 IE6에서 3px 아래 여백을 수정합니다 (목록이있는 양식을 만들 때 자주 발생 함). 이 경우 수직 정렬 (vertical-align)도 테이블 특정 동작을 트리거한다고 생각합니다. – easwee

도와 드릴 수 있습니다! 테이블을 사용하십시오!

표 형식 데이터의 경우 표를 사용하는 것이 좋습니다.

나는 조금은 진절머리 나는 대답이지만, 왜 테이블을 사용하지 않는지 설명 할 수 있습니까?

출처

2010-03-17 09:46:25

2x2 격자 인 경우 테이블 형식 데이터가 아닐 가능성이 큽니다. – Quentin

저는 수년 동안 테이블을 사용해 왔지만 CSS로 옮길 생각입니다. 즉, 셀을 강조 표시해야한다면 코드 작성이 더 쉬워졌습니다. – MrG

하지만이 경우에는 "table/tr/td"태그를 "div"태그로 변경하면됩니다. 그리고 꽤 호환되지 않는 방식으로 (오래된 브라우저는'display : table'을 처리 할 수 없습니다.) 점은 무엇인가? –

단순히 셀에 float을 추가하면 올바른 결과를 얻을 수 있습니다. Working example 코드 :

<html> 
<head> 
    <style> 
    div.el1, div.el2 { 
     color:white; 
     width:70px;height:70px; 
     border:0px; 
     padding:0px; 
     font-size: 10px; 
     font-family: "Courier"; 
    } 

    div.el1 { 
     background-color: green; 
     float:left; 
    } 

    div.el2 { 
     background-color: orange; 
     float:right; 
    } 

    div.tablediv { 
     display: table; 
     border:0px; 
     border-spacing:0px; 
     border-collapse:separate; 
    } 

    div.celldiv { 
     display: table-cell; 
    } 

    div.rowdiv { 
     display: table-row; 
     width:auto; 
    } 

</style> 

</head> 
<body> 

<div class="tablediv"> 
    <div class="rowdiv"> 
     <div class="celldiv"> 
      <div class="el1" id="x1y1">ABC</div> 
     </div> 
     <div class="celldiv"> 
      <div class="el2" id="x1y2">aaa</div> 
     </div> 
    </div> 
    <div class="rowdiv"> 
     <div class="celldiv"> 
      <div class="el1" id="x2y1">bbb</div> 
     </div> 
     <div class="celldiv"> 
      <div class="el1" id="x2y2">ccc</div> 
     </div> 
    </div> 
</div> 

</body>

출처

2010-03-17 09:48:52

예제에는 2x2 셀만 포함되어 있지만 실제로는 더 많습니다 (최대 100x100). 그러므로 저는 float : right, float : left는 제대로 작동하지 않을 것이라고 생각합니다. – MrG

나는 당신이 당신의 의도와 혼동 할 수있다 생각한다 "CSS로 이동"- CSS를 사용하는 모든 의미있는 HTML을 폐기하고 <div>와 모든 태그를 대체하는 것을 의미하지 않는다.

웹 개발 용 CSS를 사용하면 가장 적합한 HTML 태그를 사용하여 을 사용하고 CSS로 스타일을 지정합니다. 귀하의 경우, 표 형식의 데이터 테이블을 만들고 있으므로, 평상시처럼 <table> 요소를 사용해야합니다.

데이터가 실제로 표 형식의 데이터가 아니더라도 여전히 <div> 태그의 무서운 혼란을 사용할 필요가 없으며 너비가 선택적이며 각 상자 (예 : 총 4 개)에만 하나씩 필요합니다. 높이, float:left이 적용됩니다.

어쨌든이 두 가지 해결책은 브라우저 간 교차점이 될 것입니다. display:table

출처

2010-03-17 14:37:19 DisgruntledGoat

올바른 테이블 레이아웃 생성 : 예기치 않은 세포는

답변

관련 문제