テーブルに色付きのバーを入れようとしています

Question

私は現在、計算でパーセンテージの緑と赤のバーを持っています。別の色の黄色の色を同じバーに追加しようとしています。それは私のCSSやPHPの右。ここで私は緑/赤のコンボのために持っている現在のコードです。それを正しくするためには何を変える必要がありますか？ありがとう

td.graph .all { 
    background: green; 
    height: 18px; 
} 

td.graph .right { 

    text-align: right; 
    float: right; 
    background: red; 
    height: 18px; 
} 

echo '</td><td class="graph"><div class="all" style="width:100%"><div class="right" style="width:' . $right . '%"></div>' 

私は黄色のサイズを保持する新しい変数を追加し、私はそれを正しくするために必要なものを見つけようとしています。ありがとう

Answer 1

を追加することができます。その後、それらを左に浮かべます。 CSSのパーセンテージを使用してサイズを設定できます。

http://jsfiddle.net/y9UqN/

td { border: 1px solid gray; height: 50px; width: 300px; } 
td.graph .bar { 
    height: 18px; 
    float: left; 
} 
.green { background: green; width: 60%; } 
.red { background: red; width: 10%; } 
.yellow { background: yellow; width: 30%; } 

<table> 
    <tr> 
     <td class="graph"> 
      <div class="bar green"></div> 
      <div class="bar red"></div> 
      <div class="bar yellow"></div>    
     </td> 
    </tr> 
</table> 

あなたは裏面全体面積（100％）を埋めるために緑のdivが必要な場合は、その後、私は緑のdivの赤と黄色の内部を置きます。それから、それらを正しく浮かべ、パーセンテージを使ってサイズを決めます。

http://jsfiddle.net/y9UqN/1/

td { border: 1px solid gray; height: 50px; width: 300px; } 
td.graph div { 
    height: 18px; 
} 
.green { background: green; width: 100%; } 
.bar { float: right; } 
.red { background: red; width: 10%; } 
.yellow { background: yellow; width: 30%; } 

<table> 
    <tr> 
     <td class="graph"> 
      <div class="green"> 
       <div class="bar red"></div> 
       <div class="bar yellow"></div>  
      </div>      
     </td> 
    </tr> 
</table> 

Answer 2

CSSに新しいクラスを設定して、新しいtdを黄色にすることができます。

td.graph .yellow { 
background: yellow; 
//any other css you want here 
} 

、あなたはちょうど私が各色ごとに別々のdiv要素を作成します<div class="yellow">