Created
June 16, 2010 09:34
-
-
Save henrik/440391 to your computer and use it in GitHub Desktop.
Use background gradient to show progress bar in table cell.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <style> | |
| table { border-collapse: collapse; } | |
| td { border: 1px solid #000; } | |
| .bar { | |
| background-image: -webkit-gradient(linear, left top, right top, from(green), to(white), color-stop(0.75, green), color-stop(0.75, white)); | |
| background-image: -moz-linear-gradient(0, green 0%, green 75%, white 75%, white 100%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table style="width:300px"> | |
| <tr> | |
| <td> | |
| title | |
| </td> | |
| <td style="width:100px" class="bar"> | |
| 75 % | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment