JC's notes
sharing my journey on linux, one note at a time

Search

Progress bars in tables in pure CSS

In order to display my backup status, I use a HTML page generated in PHP, which parses the log files.

I wanted to get a visual indication of the backup sizes, bytes transferred, etc. and I came up with this very lightweight solution : I use a span element with a defined width. For this to work properly, the trick is to use display:block

Here is the code:

<table id="backup_summary">
  <tr><th>date</th><th>backup size</th></tr>
  <tr><td>28 October</td><td class='number'><span style='background-color:#F88;display:block;width:39%'>159GB</span></tr>
  <tr><td>27 October</td><td class='number'><span style='background-color:#F88;display:block;width:37%'>132GB</span></tr>
</table>

And this is the result:

date backup size
28 October 159GB
27 October 132GB
28 octobre 2013 · jc · Posted in web · Tagged css, html
← Previous Next →

Articles récents

  • Managing TV overscan on RetroPie (and pretty much any application)
  • VNC plugin for Remmina not found after upgrade
  • Modifying track data in Matroska (mkv) files
  • Splitting a Matroska (mkv) file by chapters
  • Switch buttons on Wacom Graphire on XFCE

Tags