title: css/html Simple progress bar using hr tag
body: <p>I'm trying to make a simple progress bar using the width property of an HR representing percent complete. I did these years ago but for some reason I can't seem to make this one look right.  The website uses tables so I am placing the bar within a table cell.  I'm open to doing it with pure css but I would like this to be light as in a few lines of code as there is a lot of other stuff on this page that has to load quickly.</p>
  
  <p>I can get the rule to display a nice solid bar.  </p>
  
  <pre><code>&lt;td width=200 style="border: 2px solid silver;padding:none"&gt;&lt;hr style="color:#c00;background-color:#c00;height:15px; border:none;" align="left" width=50% /&gt;&lt;/td&gt; 
  </code></pre>
  
  <p>where the percentage complete is set on the server side with php.  This is not a dynamic bar where polling is required.  Just one that represents percentage of a profile that is complete.</p>
  
  <p>Ideally, I'd like the bar to fill a percentage of the cell equal to that completed so that the solid bar shows what percent is done and the white space to the right what part remains.  However, I can't get a nice looking rule around the whole cell for the bar to fill a portion of.  Instead there is a lot of space around the bar.  I've tried setting the padding to none but that doesn't seem to work. </p>
  
  <p>Here is a jsfiddle.</p>
  
  <p><a href="http://jsfiddle.net/GqrnC/" rel="nofollow">http://jsfiddle.net/GqrnC/</a></p>
  
  <p>Thanks for any suggestions.  </p>