Статический индикатор в качестве фона ячейки таблицы

Question

Кто-нибудь знает лучший способ установить фон строки или ячейки в качестве «индикатора выполнения». Например, если значение ячейки «процент использования» равно 50%, столбец заполняет половину фона строки или ячейки:

╔══════════════════════════════════════════════════════════╗
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░78%░░░░░░░░░░░░░░░          ║
╚══════════════════════════════════════════════════════════╝

Я использую PHP для генерации таблицы, поэтому, возможно, я мог бы использовать одноцветное изображение в ячейке и установить ширину img. Как бы мне получить текст ячейки, чтобы сидеть сверху? Как бы я узнал, что текст сделал столбец шире ... я должен был бы использовать фиксированную ширину столбца?

Будет ли Javascript лучше, так как он сможет определить, насколько широко визуализируются столбцы?

EDIT: Просто чтобы уточнить, прогресс не меняется в прямом эфире ... только когда страница загружена.

Answer 1

Это должно быть довольно легко сделать без JavaScript, так как ширина указана в процентах, не имеет значения, какая у вас ширина таблицы:

<table style="width:200px; border: #777 2px solid;">
 <tr>
  <td style="background-color:#f00; height: 10px; width: <?php echo $_GET['percent'] . "%"; ?>;"></td>
  <td style="background-color:#555;"></td>
 </tr>
</table>

Answer 2

Теперь, когда у нас есть CSS3:

td {
   background-image: url('images/1pxGreen.png');
   background-repeat: no-repeat;
   background-size:50% 100%;
}

Answer 3

Полагаю, вы могли бы установить цвет фона и фоновое изображение на тд, где фоновый цвет - это цвет, который вы хотите для «заполненной» части индикатора выполнения, а изображение представляет собой пиксельное изображение 1x1 цвет, который вы хотите для незаполненной части. Установите фоновое изображение для повторения и установите его положение равным 0 xx%, где xx - это то, насколько вы хотите, чтобы индикатор выполнения был заполнен.

td {
   background-color: #f00;
   background-image: url('images/1pxwhite.gif');
   background-repeat: repeat;
   background-position: 0 50%;
}

Answer 4

В HTML (я использую веточку, но вы можете понять):

<td class="text-right pie-progress pie-progress-share{{ (count/totalCount)|round }}">{{ count }}</td>

В CSS:

td.pie-progress {
    position: relative;
}
td.pie-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #66afe9;
    z-index: -1;
}
td.pie-progress-green::before {
    /* example of other color */
    background-color: #66af66;
}
td.pie-progress.pie-progress-share1::before {width: 1%;}
td.pie-progress.pie-progress-share2::before {width: 2%;}
...
td.pie-progress.pie-progress-share100::before {width: 100%;}

Answer 5

Если CSS приемлем, Бен Огл имеет хорошее решение: Простой CSS блестящий индикатор выполнения .