テーブルヘッドを上にせずに左に表示する

私のCSSに問題があります。 .leftクラスと.rightクラスで表される2列の情報表示をしようとしています。テーブルヘッドを上にせずに左に表示する

You can see the issues at my jsFiddle

出典

2012-04-18 JDV590

問題がありますか？ – Faust

@Faustはい....これは私のマークアップ/ cssで何が間違っているのかを尋ねる複雑な方法だったと思う。あなたは私のjsフィドルに行くときに 'Here'リンクをクリックして見ることができる。 – JDV590

私は作ったこれをより簡単な質問にするための適切な編集 – JDV590

編集：コメントに基づいて答えを変更します。

表形式のデータが表示されているため、表を使用してください。 this similar questionによって示されるように、tbodyタグを使用すると、ネストした表を避けることができます。

このソリューションでは、表を作成します。各TBODYはデータの1つの「グループ」を表します。各群において、最初の列は、（THEADのような）メタデータためなり、第2列は、実際のデータであろう：

<table> 
    <tbody> <!-- First Set of Data --> 
    <tr> 
     <td> Sessions </td> 
     <td> 1 </td> 
    </tr> 
    <tr> 
     <td> Date </td> 
     <td> 1/1/2003 </td> 
    </tr> 
    ... 
    </tbody> 
    <tbody> <!-- Second set of Data --> 
    <tr> 
     <td> Sessions </td> 
     <td> 5 </td> 
    </tr> 
    ... 
    </tbody> 
</table>

あなたは、より容易に、おそらく使用して、外部スタイルシートを使用してスタイルすることができ:nth-childセレクタおよび/またはcolgroupタグまたはJavascript。

質問の名前を"How to display tabular data with left hand column as key"に変更すると、さらに回答が得られる場合があります。

出典

2012-04-18 19:39:09 chris

オリジナルのソリューションはほぼ完璧でした。多くの行を持つものがあれば、これ以上のものを探してみたいです。 [JSFIDDLEの例]（http://jsfiddle.net/WSEH4/50/）。私はまだ私は日トピック主な原因は、私はあなたがやろうとか見各行 – JDV590

で同様の問題を取得してい除き、あなたの例を使用していました。サイズに基づいてレイアウトを変更しない場合は、常に同じように見たい場合は、テーブルがおそらく最善の解決策になるでしょう - この場合ですか？ – JDV590

に表示する日付セッションをご希望の左上隅 – chris

ここでは、abosluteポジショニングを使わずにしようとしていることをやり遂げる方法があります（これは壊れやすい）。

http://jsfiddle.net/WSEH4/33/

基本的には、インラインブロックを使用すると、CSSが正しくない場合の要素が重なっていないことが保証されます。しかし、あなたの問題を解決する最良の方法は、代わりにテーブルを使うことです。このような状況のためのテーブルは、ラベル/値システムとともに存在します。

出典

2012-04-18 19:41:00 Jake

また、フローティングで行うこともできます。デモを介して表示される例。

http://jsfiddle.net/WSEH4/36/

出典

2012-04-18 19:43:07 irfanmcsd

私はずっとスパンの上にdivを使用することを好む：（jsFiddle：http://jsfiddle.net/WSEH4/44/）

HTML：

<!DOCTYPE html>

<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

</head> 

<body> 
    <div style="display: block;"> 
     <div class="child">Where</div> 
     <div class="child">China</div> 
     <div class="clear"/> 

     <div class="child">Voltage</div> 
     <div class="child">220 V</div> 
     <div class="clear"/> 

     <div class="child">Frequency</div> 
     <div class="child">50 HZ</div> 
     <div class="clear"/> 

     <div class="child">Plug Type</div> 
     <div class="child">USA</div> 
     <div class="clear"/> 
    </div> 
</body>

CSS：

.child 
{ 
    float: left; 
    top: 6px; 
    left: 6px; 
    width: 25%; 
    padding-right: 10px; 
    white-space: nowrap; 
    border-bottom: 1px solid #eee; 
} 

.clear 
{ 
    clear: both; 
    display: block;  
}

出典

2012-04-18 19:43:10

ねえ、あなたは、このような

としてこれを行うことができますCSSの

div{ 
margin-top:10px; 
} 
.right{ 
float:left; 
    width:50%; 
border-right:solid 1px red;  
} 
.left{ 
    float:right; 
}

HTML

<div style="display: block;width:200px;overflow: hidden;"> 

    <div class="right">China</div> 
    <div class="left">Plug Type</div> 

    <div class="right">220 V</div> 
    <div class="left">Frequency</div> 

    <div class="right">50 HZ</div> 
    <div class="left">Voltage</div> 

    <div class="right">USA</div> 
    <div class="left">Where</div> 



</div>

ライブデモhttp://jsfiddle.net/rohitazad/WSEH4/52/

出典

2012-04-19 08:49:12

テーブルヘッドを上にせずに左に表示する

答えて

関連する問題