HTML-Tabelle Zelle teilweise Hintergrund füllen

Question

Ich habe eine Tabelle mit einer Spalte, die einen% -Wert zeigt. Um es visuell ansprechender zu machen, möchte ich einen linearen Gradientenhintergrund anzeigen, der dem% -Wert entspricht (z. B. würde 50% die Hälfte der Breite der Zelle füllen).

habe ich herausgefunden, wie Gradienten Hintergrund zu machen, aber nicht wissen (ColorZilla der Gradient Generator), wie die Breite der Hintergrundfüllung zu setzen ....

Aktuelle Code:

<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

Es ist ziemlich einfach. Setzen Sie einfach den Wert background-size basierend auf dem Prozentsatz wie im folgenden Codeausschnitt. Wenn der Gradient horizontal ist, ändern Sie die Größe in der X-Achse entsprechend dem Prozentwert oder wenn der Gradient vertikal ist, ändern Sie die Größe in der Y-Achse.

Für negative Werte ändern sich die Richtung des Gradienten von to right zu to left und setzen 100% 100% als Wert für background-position es richtig ausgerichtet zu bekommen.

(Inline-Styles nur verwendet werden, weil Sie es über JS einstellen bräuchten die% Wert übereinstimmen. Dies ist nicht mit CSS gemacht werden kann.)

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>