Как было предложено в комментариях, у меня был хороший успех с одним пикселем background-image
, который растягивается до соответствующего процента background-size
ячейки таблицы. Это работает во всех современных браузерах (IE9 +).
Это имеет преимущество (с использованием дополнительного div
элемента, содержащего «цветную полосу»), независимо от любого другого стиля, который вы, возможно, захотите применить к ячейке таблицы, такой как text-align
и т. д. Естественно, это будет отображаться за содержимым ячеек и сгибается, чтобы заполнить ячейку таблицы при использовании процентов.
td.bargraph {
background:transparent url(/img/dot-green.gif) 0 center no-repeat;
text-align: center;
}
<td class="bargraph" style="background-size:<?=$perc?>% 80%"><?=$perc?>%</td>
Где $perc
- ваш расчетный процент.
( Сопровождающий Spyder здесь ) В нашей текущей стабильной версии такого нет (по состоянию на январь / 2019 г. это 3.3.2). Тем не менее, мы могли бы добавить что-то подобное для нашей следующей основной версии (Spyder 4, которая будет выпущена в конце этого года).
Пожалуйста, откройте вопрос в этого репо , чтобы обсудить, если / как мы должны реализовать это.