Zastępowanie koloru tła o określony procent

Question

Dodaję wiersz przez <table> z foreach.

W pewnym momencie chcę, aby komórka miała szare tło w oparciu o procent wykalkulowany w PHP.

Np: 50% oznacza połowę tła komórki z szarą resztą pozostanie puste | 33,33% = 1/3 tła itd.

Problemy, które spotkałem to albo tekst w <td> został streched przez dowolną inną div, jeśli zastosuję ten kolor do <td> Ja też zastąpić tekst później etc ..

Oto kod:

$percent = 1/3; // For example 
$percent_friendly = number_format($percent * 100, 2); //This will return 33.33 

echo '<td>'.$percent_friendly.' % 
    <div style="background-color: grey"> // So I want the grey to fill 33.33% of the space 
    </div> 
    <div style="background-color: white"> 
    </div> 
</td>'; 

i styl stosowany do tej pory:

table { 
    margin-left:auto; 
    margin-right:auto; 
    font-size:18px; 
} 

table, th, td { 
    text-align: center; 
    border: 1px solid black; 
    position:relative; 
} 

i musi być brakuje czegoś, ale C SS naprawdę nie jest moją rzeczą, wszelkie wyjaśnienia lub pomoc byłyby bardzo mile widziane.

Answer 1

Oto proste rozwiązanie przy użyciu 2 elementów div o stałej szerokości. Procent jest wstawiany bezpośrednio w znacznikach. Po ustawieniu <p> w pozycji absolutnej nie powinieneś mieć problemów z rozciąganiem td.

table { 
 
    border: 1px solid; 
 
} 
 
td { 
 
    height: 50px; 
 
} 
 
.progress { 
 
    padding:0; 
 
    width: 200px; 
 
    border: 1px solid #555; 
 
    background: #ddd; 
 
    position: relative; 
 
} 
 
.bar { 
 
    height: 100%; 
 
    background: #57a; 
 
} 
 
.bar p { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin: 0; 
 
    line-height: 30px; 
 
}

<table> 
 
    <tr> 
 
     <td class="progress"> 
 
      <div class="bar" style="width: 33.33%"><p>33.33% complete</p></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="progress"> 
 
      <div class="bar" style="width: 16.66%"><p>16.66% complete</p></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="progress"> 
 
      <div class="bar" style="width: 66.66%"><p>66.66% complete</p></div> 
 
     </td> 
 
    </tr> 
 
</table>

powinien działać we wszystkich przeglądarkach, ponieważ używa tylko elementy szerokości.

Answer 2

Można użyć gradientu liniowego dla koloru tła, jeśli nie przeszkadza to wygląda trochę mylący:

echo '<td style="background: linear-gradient(to right, grey 0%,grey '.$percent.'%,white '.$percent.'%,white 100%);">'. 
      $percent_friendly.'%'. 
    '</td>'; 

Pamiętaj jednak, że to przyzwyczajenie praca w IE9 i poniżej

Answer 3

W PHP:

echo " 
<td> 
    <div class='progress-bar' style='width: $percent_friendly%'></div> 
    <span>$percent_friendly%</span> 
</td>"; 

W CSS:

td    { position: relative; } 
td .progress-bar { position: absolute; background: grey; top: 0; bottom: 0; left: 0; } 
td span   { position: relative; } 

Umożliwia to stosowanie dowolnych stylów strukturalnych/czcionek do elementu td, a pasek postępu dostosuje się samoczynnie.