title: Static progress bar as background of table cell
body: <p>Does anyone know the best way to set the background of a row or cell as a 'progress bar'. For example if the 'percent used' cell value is <code>50%</code> the bar fills half the background of the row or cell:</p>
  
  <pre><code>╔══════════════════════════════════════════════════════════╗
  ║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░78%░░░░░░░░░░░░░░░          ║
  ╚══════════════════════════════════════════════════════════╝
  </code></pre>
  
  <p>I am using PHP to generate the table, so maybe I could use a single colour image in the cell and set the width of the img. How would I get the text of the cell to sit on top? How would I know if the text had made the column wider... would I have to use fixed column widths?</p>
  
  <p>Would Javascript be better as it would be able to detect how wide the columns were rendered as?</p>
  
  <p>EDIT:
  Just to clarify, the progress does not change live... just when the page is loaded.</p>