Переопределить фоновый цвет на определенный процент

Я добавляю строку через <table> с foreach.Переопределить фоновый цвет на определенный процент

В какой-то момент я хочу, чтобы ячейка имела серый фон, основанный на проценте, вычисляемом на PHP.

Ex: 50% означает половину фона ячейки, чтобы быть серым остальное останется пустым | 33,33% = 1/3 фона и т. Д.

Проблемы, с которыми я столкнулся, - это либо текст в <td>, который получил какой-либо другой div, если я применил цвет к <td>. Я также переопределить текст позже и т.д ..

Вот код:

$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>';

и стиль применяется до сих пор:

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

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

Я должен что-то, но не хватает C SS действительно не моя вещь, любое объяснение или помощь были бы весьма признательны.

источник

2016-08-05 Nirnae

Итак, вы хотите имитировать индикатор выполнения. –

@ VicenteOlivertRiera Да, но фиксированный индикатор выполнения, поскольку данные не предназначены для перемещения – Nirnae

Как насчет создания других двух div внутри этого, первого с серым фоном, и дать им ширину на основе этого процента? –

Это простое решение, использующее 2 divs с фиксированной шириной. Процент вставляется непосредственно в разметку. Установив <p> в абсолютное положение, у вас не должно быть проблем с растяжением 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>

Должен работать во всех браузерах, поскольку он использует только ширину элементов.

источник

2016-08-05 17:35:36 andreas

Это почти то, что я ищу, но мне нужно заполнить, чтобы заполнить высоту ячейки, как вы можете видеть http://puu.sh/qqVGf/df75700a0b.png – Nirnae

Итак, вы хотите, чтобы индикатор прогресса имел ту же высоту, что и клетка? – andreas

Просто переместите класс прогресса в 'td' и удалите теперь бесполезный' div' – BDawg

Вы можете использовать линейный градиент для фона, если вы не возражаете, это выглядит немного запутанным:

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

Имейте в виду, однако, что это не будет работать в IE9 и ниже

источник

2016-08-05 17:38:03

В РНР:

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

В CSS:

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

Это позволяет применять любые стили структуры/шрифта к элементу td, и индикатор выполнения автоматически настроится самостоятельно.

источник

2016-08-05 18:09:56 cdrini

Переопределить фоновый цвет на определенный процент

ответ

Смежные вопросы