div 태그를 사용하여 테이블을 만드는 방법은 무엇입니까?

이 질문은 실제로 GWT 프레임 워크를 사용한 실험에서 나온 것이지만 질문을 단순화하기로 결정했습니다.div 태그를 사용하여 테이블을 만드는 방법은 무엇입니까?

div가있는 테이블 태그를 바꾸려고합니다. 세로로 정렬 된 두 개의 DIV 태그가 포함 된 두 개의 DIV 태그를 가로로 정렬하려면 어떻게해야합니까? 여기

내가 무엇을 : 그것은 내가 기대

Name: 
Address: 
test1 
test2

으로 내 크롬 15.0.874.106 분에서 렌더링 것

<!doctype html> 
<html> 
<body> 
<div style="display: block; "> 
    <div style="display: inline; "> 
     <div class="gwt-Label" >Name:</div> 
     <div class="gwt-Label" >Address:</div> 
    </div> 
    <div style="display: inline; "> 
     <div class="gwt-Label" >test1</div> 
     <div class="gwt-Label" >test2</div> 
    </div> 
</div> 
</body> 
</html>

그것은

Name: test1 
Address: test2

할 수있는 당신하시기 바랍니다 도와주세요 ?

감사합니다.

출처

2011-11-13 expert

당신이 인라인 블록과 인라인 교체 시도 확인하시기 바랍니다? –

; 당신이

또는 목적이 다른 아직도 싶어 사업부로 가면있는 jqGrid (demo)

를 사용해보십시오 동적 테이블 구조를 생성하기 위해 찾고 있다면

<body> 
    <div style="display: table;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell;">Name:</div> 
      <div style="display: table-cell;">test1</div> 
     </div> 
     <div style="display: table-row;"> 
      <div style="display: table-cell;">Address:</div> 
      <div style="display: table-cell;">test2</div> 
     </div> 
    </div> 
</body>

출처

2011-11-13 08:18:01 neurotik

FYI ... IE 6과 7에서는 작동하지 않습니다. 둘 다 여전히 A-Grade http입니다. : //www.quirksmode.org/css/display.html http://yuilibrary.com/yui/docs/tutorials/gbs/ – Homer6

<div style="display: block; "> 
     <div style="float:left"> 
      <div class="gwt-Label" >Name:</div> 
      <div class="gwt-Label" >Address:</div> 
     </div> 
     <div style="float:left"> 
      <div class="gwt-Label" >test1</div> 
      <div class="gwt-Label" >test2</div> 
     </div> 
<div style="clear:both"></div> 
    </div>

출처

2011-11-13 08:08:06

HTML 표는 표 형식 데이터를 나타내는 데 적합합니다. 일반 레이아웃에 테이블을 사용하지 마십시오. 그래도 표 형식의 데이터는 표가 더 좋습니다.

UPDATE : 고정으로 http://www.w3.org/TR/css3-grid-layout/

하지만 reeeeeeally은 어떤 이유로 작동하게하려면 그대로, 나는 모든 열을 설정할 것 : 앞으로, 당신은 CSS3 그리드 레이아웃 사양을 참조 할 수 있습니다 너비, 왼쪽 부동 및 첫 번째 열에 취소. 다른 열에 대해 다른 너비가 필요한 경우 해당 열에 대해 특정 클래스를 만들고 특정 너비를 설정할 수 있습니다. 그러나 테이블에 사용자 데이터가있는 경우 오버플로 : 숨김이 설정되어 있는지 확인해야합니다. 그렇지 않으면 테이블이 손상됩니다.

여기에 코드를 붙여 넣었지만 jsfiddle link도 생성했습니다.

<div class="table"> 

    <div class="column first">Name:</div> 
    <div class="column">test1</div> 

    <div class="column first">Address:</div> 
    <div class="column">test2</div> 

</div>

그리고 스타일 :

가 여기에 HTML의 그러나

.table .column{ 
    width: 100px; 
    float: left; 
} 

.table .column.first{ 
    clear: left; 
}

, 테이블 변경 안의 텍스트 등의 문제로 실행하는 것입니다. 그것은 테이블처럼 행동하지 않을 것입니다. 예를 들어, 셀의 텍스트가 다음 행으로 넘어갈 때 셀이 할 것으로 예상하는 것처럼 그 행의 모든 셀 높이를 조정하지는 않습니다. 따라서 overflow : hidden 또는 HTML 표만 사용하십시오. 도움이

희망 ... 난 당신이 실제 테이블 그러나 더 적절할 것 가지고 예를 들어 생각

출처

2011-11-13 08:11:09 Homer6

대안을 제공하도록 업데이트되었습니다. – Homer6

답변을 주셔서 감사합니다. – expert

실제로, 내 것은 IE7에서도 작동하지 않습니다 ... 오 ... 물론 신뢰할 수있는 테이블 일 것입니다. – Homer6

: 당신은 또한이 같은 일을 할 수 있을까? 시도해보십시오.

float:left; 대신 display:inline을 사용하십시오. Float은 div를 콘텐츠 크기로 축소하여 다른 요소를위한 공간을 만듭니다.이것은 다른 요소를 떠 다니는 요소 옆에 수용하게합니다.

수정 코드 :

<!doctype html> 
<html> 
<body> 
<div style="display: block; "> 
    <div style="float:left; "> 
     <div class="gwt-Label" >Name:</div> 
     <div class="gwt-Label" >Address:</div> 
    </div> 
    <div style="float:left;"> 
     <div class="gwt-Label" >test1</div> 
     <div class="gwt-Label" >test2</div> 
    </div> 
</div> 
</body> 
</html>

출처

2011-11-13 08:18:02 graphicana

모에의 방법은 정말 멋진이지만 표준이 아니다. 이것이 최선의 방법입니다.

사용 CSS 명령 그냥이 같은 "부동"

HTML 코드 :

<!doctype html> 
<html> 
<head> 
    <link href="Style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div style="display: block; "> 
    <div style="display: inline; "> 
     <div class="gwt-Label" >Name:</div> 
     <div class="gwt-Label" >test1</div> 
    </div> 
    <div style="display: inline; "> 
     <div class="gwt-Label" >Address:</div> 
     <div class="gwt-Label" >test2</div> 
    </div> 
</div> 
</body> 
</html>

CSS 파일 (있는 style.css) :

.gwt-Label 
{ 
    float: left; 
    width: 50% 
    }

또는 당신은 그것을 모두를 가질 수 있습니다 한 곳 :

<!doctype html> 
<html> 
<head> 

    <style type="text/css"> 
     .gwt-Label{ 
     float: left; 
     width: 50% 
     } 
    </style> 

</head> 
<body> 
<div style="display: block; "> 
    <div style="display: inline; "> 
     <div class="gwt-Label" >Name:</div> 
     <div class="gwt-Label" >test1</div> 
    </div> 
    <div style="display: inline; "> 
     <div class="gwt-Label" >Address:</div> 
     <div class="gwt-Label" >test2</div> 
    </div> 
</div> 
</body> 
</html>

출처

2011-11-13 08:20:05

CSS3는 티켓이 있습니다

<div class="tabl"> 
<div class="row"> 
    <div class="cell"> CELL one</div> 
    <div class="cell"> CELL two</div> 
    <div class="cell"> CELL three</div></div> 
<div class="row"> 
    <div class="cell"> CELL four 
    </div><div class="cell"> CELL five</div> 
    <div class="cell"> 
     <div class="tabl"> 
      <div class="row"> 
       <div class="cell">CELL 6A</div> 
       <div class="cell">CELL6B</div> 
      </div> 
     </div> 
    </div> 
</div>

당신 경우 : 그때는 중첩 테이블을 포함 시켰이 경우 테이블과 같은 구조로 연합 할 수

.tabl {width:400px;border:1px solid blue;display:table} 
.row {height:40px;display:table-row} 
.cell {border:1px solid black;display:table-cell}

당신은 아마 외부 포장지를 빠뜨릴 수 있기를 원합니다. 실제 표와 달리 행과 세포는 그것을 필요로하지 않는 것처럼 보입니다. 불행히도 이것은 IE9를 포함한 IE를 제외하는 CSS3를 지원하는 최신 브라우저에서만 작동합니다.

출처

2011-11-13 08:22:15 COBOLdinosaur

['display : table'은 CSS2에서 온 것입니다.] (http : //www.w3. org/TR/CSS21/visuren.html # propdef-display). IE의 이전 버전은 [suck] 때문에 (http://caniuse.com/css-table) 지원하지 않습니다. IE8/9가 지원합니다. – thirtydot

솔루션은 다음과 같다 : - 는

<!doctypehtml> 
<html> 
<body> 
<div class="Row"> 
    <div class="Cell"> 
     <p>Name:</p> 
    </div> 
    <div class="Cell"> 
     <p>Test1</p> 
    </div> 
</div> 
<div class="Row"> 
    <div class="Cell"> 
     <p>Address:</p> 
    </div> 
    <div class="Cell"> 
     <p>Test2</p> 
    </div> 
</div> 
</body> 
<style type="text/css"> 
    .Table 
    { 
     display: table; 
    } 
    .Row 
    { 
     display: table-row; 
    } 
    .Cell 
    { 
     display: table-cell; 
    } 
</style> 
</html>

출처

2013-12-10 11:47:03

div 태그를 사용하여 테이블을 만드는 방법은 무엇입니까?

답변

관련 문제