divタグを使用してテーブルを作成するにはどうすればよいですか？

この質問は実際に私のGWTフレームワークの実験から来たものですが、私はその質問を単純化することに決めました。divタグを使用してテーブルを作成するにはどうすればよいですか？

私はdivタグでテーブルタグを置き換えようとしています。 2つの垂直方向に整列したDIVタグを含む2つのDIVタグを水平に整列するにはどうすればよいですか？ここで

は私が持っているものである：それは私が期待

Name: 
Address: 
test1 
test2

としての私のクロム15.0.874.106 mの中でレンダリングされます

<!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）

またはあなたの目的が異なっており、まだたいがdiv要素で行く場合を使用してみてください

<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グレードの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：今後、あなたはCSS3グリッドレイアウトの仕様に相談することもできます。http://www.w3.org/TR/css3-grid-layout/

しかし、あなたはreeeeeeallyそれが何らかの理由のために働くようにしたい場合は、固定としてそのまま、私はすべての列を設定したいです幅、浮動小数点、および最初の列のクリア。異なる列に異なる幅が必要な場合は、それらの列に対して特定のクラスを作成し、特定の幅を設定できます。しかし、あなたのテーブルにユーザーデータがある場合は、オーバーフローを確認する必要があります：隠されている、またはあなたのテーブルを壊すでしょう。

ここにコードを貼り付けましたが、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>

とスタイル：

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

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

は、しかし、あなたがテーブルの変更内のテキストとして問題に実行しようとしている。ここ

は、HTMLです。それはテーブルのように行動するつもりはない。たとえば、セルのテキストが次の行に折り返された場合、その行のすべてのセルの高さが調整されるわけではありません。したがって、オーバーフロー：隠されているか、単に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% 
    }

それとも、でそれをすべて持っていることができます1つの場所：

<!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の古いバージョン（サポートしていない）（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タグを使用してテーブルを作成するにはどうすればよいですか？

答えて

関連する問題