HTML 표 셀 부분 배경 채우기

Question

% 값을 표시하는 열이있는 표가 있습니다. 시각적으로 더 매력적으로 보이도록 % 값에 해당하는 선형 그래디언트 배경을 표시하고 싶습니다 (예 : 50 %는 셀 너비의 절반을 채 웁니다).

<table border="1" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td width="100" style="background: linear-gradient(to right, rgba(0,150,0,1) 0%,rgba(0,175,0,1) 17%,rgba(0,190,0,1) 33%,rgba(82,210,82,1) 67%,rgba(131,230,131,1) 83%,rgba(180,221,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */">50%</td> 
    </tr> 
</table> 

Answer 1

:

나는 (ColorZilla의 그라데이션 생성기를 사용) 그라데이션 배경을 만들하지만 배경 채우기 ....

현재 코드의 폭을 설정하는 방법을 모르는 방법을 알아 냈어 그것은 꽤 간단합니다. 아래 스 니펫과 같이 백분율을 기준으로 background-size 값을 설정하면됩니다. 그래디언트가 수평 인 경우 X 축의 크기를 백분율 값과 일치 시키거나 그래디언트가 세로 인 경우 Y 축에서 크기를 변경합니다. 음수 값

는 to left에 to right 그라데이션의 방향을 변경하고 background-position이 잘 정렬 취득하는 값 100% 100% 세트.

가 (당신은 % 값과 일치하는 JS를 통해 그것을 설정해야 할 것입니다 때문에 인라인 스타일에만 사용됩니다. 이것은 CSS와 함께 할 수 없습니다.를)

td { 
 
    width: 25%; /* only for demo, not really required */ 
 
    background-image: linear-gradient(to right, rgba(0, 150, 0, 1) 0%, rgba(0, 175, 0, 1) 17%, rgba(0, 190, 0, 1) 33%, rgba(82, 210, 82, 1) 67%, rgba(131, 230, 131, 1) 83%, rgba(180, 221, 180, 1) 100%); /* your gradient */ 
 
    background-repeat: no-repeat; /* don't remove */ 
 
} 
 
td.negative { 
 
    background-image: linear-gradient(to left, rgba(0, 150, 0, 1) 0%, rgba(0, 175, 0, 1) 17%, rgba(0, 190, 0, 1) 33%, rgba(82, 210, 82, 1) 67%, rgba(131, 230, 131, 1) 83%, rgba(180, 221, 180, 1) 100%); /* your gradient */ 
 
    background-position: 100% 100%; 
 
} 
 
/* just for demo */ 
 

 
table { 
 
    table-layout: fixed; 
 
    width: 400px; 
 
} 
 
table, tr, td { 
 
    border: 1px solid; 
 
}

<table> 
 
    <tr> 
 
    <td style='background-size: 90% 100%'>90%</td> 
 
    <td style='background-size: 50% 100%'>50%</td> 
 
    <td style='background-size: 20% 100%'>20%</td> 
 
    <td style='background-size: 100% 100%'>100%</td> 
 
    </tr> 
 
    <tr> 
 
    <td style='background-size: 90% 100%' class='negative'>-90%</td> 
 
    <td style='background-size: 50% 100%' class='negative'>-50%</td> 
 
    <td style='background-size: 20% 100%' class='negative'>-20%</td> 
 
    <td style='background-size: 100% 100%'>100%</td> 
 
    </tr> 
 
</table>