Displaying percentage bar with background color

Question

For example, if I have a table with two columns and 2 rows :

Col1       Percentage
50            50% 
70            70%

How do I fill the Percentage column with color represent the value of COl1 ? Something like this :

Answer 1

You can use a linear gradient with two stops immediately following one another:

.percentageFill{
    height:30px;

    background: -webkit-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:    -moz-linear-gradient(left, #efe3af 75%, #ffffff 75%);
    background:     -ms-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:      -o-linear-gradient(left, #efe3af 75%,#ffffff 75%);
    background:         linear-gradient(to right, #efe3af 75%,#ffffff 75%);

    border:1px solid black;
}

<div class='percentageFill'>75%</div>

Remember many browser(s)/versions require a vendor prefix for linear-gradient.

Answer 2

You could use a combination of background-image of varying size (based on your values) with a little bit of Javascript / jQuery to make it dynamic.

Note: linear-gradient is actually a background-image not background-color. So, we can leverage the background-size and background-repeat properties on it. In the below example, I have used a dummy gradient with same from and to colours. This gives it a simple flat look. You can have complex gradient to jazz up the bar.

Run the below snippet to view a demo:

/* A little bit of jQuery / Javascript */

// Pick up each relevant cell, and
// Assign the text to its background-size property

$("td.percent").each(function() {
    var s = $(this).text() + ' 100%';
    // This will get 's' as 'n% 100%'. We have to only change the width, 
    // height remains 100%. We assign this 's' to the css.
    $(this).css({"background-size": s});
});

/* CSS */

* { box-sizing: border-box; }
table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}
col.small { width: 30%; }
col.big { width: 70%; }
th, td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 4px;
}

/* this is the style which does the work */
td.percent {
    text-align: center;
    background-color: #eee;
    /* dummy gradient with same from and to colours */
    /* you can use any gradient to jazz it up */
    background-image: linear-gradient(to right, #3399dd, #3399dd);
    /* because gradients are images, we can use background-size property */
    background-size: 1% 100%;         /* initial width of 1% and height 100%*/
    background-repeat: no-repeat;     /* this is important to restrict the gradient */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Your table with second column containing percent values -->

<table>
    <col class="small" /><col class="big" />
    <thead><tr><th>Title</th><th>Value</th></tr></thead>
    <tbody>
        <tr><td>One</td><td class="percent">65%</td></tr>
        <tr><td>Two</td><td class="percent">90%</td></tr>
        <tr><td>Three</td><td class="percent">20%</td></tr>
    </tbody>
</table>

Also a fiddle, if you want to check out different percent values with it: http://jsfiddle.net/abhitalks/xh734aej/2/

---

There is a recommendation which when implemented will allow attr on other CSS properties like width etc. apart from content. This will then allow making the stop sizes dynamically only using CSS without Javascript.

Reference: http://www.w3.org/TR/css3-values/#attr-value

.