테이블 셀을 2 색으로 설정하는 방법은 무엇입니까?

Question

2 색으로 <td>을 만드는 방법은 무엇입니까?

이 내 코드입니다 :

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

하지만 하나td 사용 z-index=1와 td 10 %를 쓰고 싶지만 방법을 모른다. 난 당신이 같은 결과를 기대하고 희망

Answer 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; 
} 

Answer 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> 

희망이 있습니다.

Answer 3

당신이 많은 가능성 크로스 브라우저가 아닌 데모 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> 

Answer 4

재미있는 개념,하지만 당신은 정말 테이블 레이아웃이 필요합니까?

약간 다른 접근 방식을 사용하는 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로 수를 변경할 수 있습니다.

아이디어 만 있습니다.