2014-01-18 11 views
9

<td>の作成方法は2種類ありますか?テーブルセルを2色に設定する方法は?

これは私のコードです:

<table cellspacing=0> 
    <tr> 
    <td bgcolor=green><img src='pic/s.gif' width=8 height=5></td> 
    <td bgcolor=#AAAAAA><img src='pic/s.gif' width=72 height=5></td> 
    <td style="color: green;">10%</td> 
    </tr> 
</table> 

が、私はz-index=1tdを使用してtdに10%を書きたいが、私は方法がわかりません。私はあなたがこのような結果を期待している願っています

enter image description here

+0

私はこれらの「2つの色」で達成しようとしていることを理解していません。私たちはあなたに何を意味するのかを示すために素早く描くことができますか? –

+1

@ user3172276質問をよく説明してください、それは明確ではありません –

+1

明確に理解できません。しかし、あなたのコードはjsfiddle http://jsfiddle.net/T7CNL/2/のようになります。二重引用符とバックスラッシュがありません。まずそれを正しく変更してください... – Karuppiah

答えて

1

...

DEMO JsFiddle

HTML

<table> 
     <tr> 
      <td class="red"></td> 
      <td class="green"><span class="ten">10%</span></td> 
     </tr> 
    </table> 

CSS

table 
{ 
    border-collapse: collapse; 
} 
.red 
{ 
    background-color: red; 
    width: 10px; 
    height: 5px; 
} 
.green 
{ 
    background-color: green; 
    width: 90px; 
    height: 5px; 
} 
.ten 
{ 
    color: #ffffff; 
} 
+0

これらは正しいですが、私はちょうど** one 'td'を使うべきです** – Maysam

+0

@Maysam:このようにhttp://jsfiddle.net/ T7CNL/6 /。ここで私は1つのTDと複数のスパンを使用しています...? – Karuppiah

0

これを行うには、Photoshopのようなイメージを作成し、使用する2つの色を選択し、必要に応じてそれらを配置することをお勧めします。次にコードでこのようなことをしてください:

<table> 
    <tr> 
     <td style="background-image:url('test/test.jpg');background-size:cover;"> 
      <table width="100%"> 
       <tr> 
        <td width="10%">10%</td> 
        <td width="90%">90%</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

希望します。

+0

動的で値の変更があります – Maysam

+0

動的であることを目指しているなら、私の上記の例はうまくいくでしょう - あなたはbackground-sizeがカバーするように設定しなければなりません。これは、それが縮小し、テーブルと共に成長することを意味します – KM123

0

お持ちの多くの可能性のクロスブラウザとない:デモhttp://codepen.io/anon/pen/zDAof

  • はめ込み影、
  • の直線勾配 -
  • 背景画像
  • 混合または他の?
table { 
    width:100%; 
    height:100px; 
} 
td { 
    background:red; 
    padding-left:11%; 
} 
tr:first-child td { 
    box-shadow:inset 10vw 0 0 green 
} 
tr:nth-child(2) td { 
    background:linear-gradient(
    to right, 
    green 0, 
    green 10%, 
    transparent 10%, 
    transparent 100% 
) red; 
}tr:nth-child(3) td { 
    background:url(http://dummyimage.com/2000x1/ff0000/ff0000) repeat-y right green; 
    background-size:90%; 
} 
tr:last-child td { 
    background:linear-gradient(to right, 
    green, 
    green 10%, 
    red 10%, 
    red); 
} 

デモ用のHTML:

<table> 
    <tr> 
    <td> inset shadow 
    </td> 
    </tr> 
    <tr> 
    <td> Linear- gradient + bg color 
    </td> 
    </tr> 
    <tr> 
    <td> 
     background-image repeat-y 
    </td> 
    </tr> 
    <tr> 
    <td> 
     linear-gradient 
    </td> 
    </tr> 
</table> 
1

興味深い概念が、あなたは本当にテーブルレイアウトが必要なのでしょうか?

FIDDLEのアプローチは少し異なります。

HTML

<table> 
    <tr><td> 
      <div class='celldiv'>20% 
       <div class='variablediv'></div> 
      </div> 
     </td></tr> 
</table> 

CSS

td { 
    height: 20px; 
    width: 100px; 
    padding-left: 30px; 
} 
.celldiv { 
    height: 100%; 
    width: 100%; 
    background-color: red; 
} 
.variablediv { 
    float: left; 
    height: 100%; 
    width: 20%; 
    background-color: blue; 
    margin-right: 5px; 
} 

そして、あなたは、動的青の幅とjQueryを使って番号を変更することができます。

単なるアイデアです。

関連する問題