CODEWITHSUNDEEP
htmlcss
David Bélanger
David Bélanger

Reputation: 7438

CSS Background-Size doesn't work with static color

I am very bad in CSS and I need to accomplish something complicated for me.

I got a table with data and I have a column where I have something like Qty Assigned / Qty Requested. I calculate the % assigned so 5 assigned of 10 will be 50%. Now, I want to put a background-color on the TD who match the %. So 50% will be half of the TD in let's say red.

I have tried to use background-color: red; background-size: <?php echo $BgPct; ?>%; but it doesn't work.

Anyone have solutions ? I can use whatever. I have jQuery also. I don't care if it's CSS1/2/3, but it need to be accurate so 66% isn't a background picture of 75%.

Upvotes: 17

Views: 24412

Answers (4)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

You can use linear-gradient for this

For example, if you need 50% of red

td {
  background: linear-gradient(to right, red 50%, transparent 0);
}

Demo:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 10px;
}

.half {
  background: linear-gradient(to right, red 50%, transparent 0);
}

.one-third {
  background: linear-gradient(to right, red 33.33%, transparent 0);
}

.three-quarters {
  background: linear-gradient(to right, red 75%, transparent 0);
}
<table>
  <tr>
    <td class="half">50%</td>
  </tr>
  <tr>
    <td class="one-third">33%</td>
  </tr>
  <tr>
    <td class="three-quarters">75%</td>
  </tr>
</table>

Zero 0 second value is used intentionally to avoid duplicating first value. This works because next value in gradient can't be less than previous.

Upvotes: 23

dezman
dezman

Reputation: 19358

I would put a div, colored red, inside each of the tds you want to effect. Then use jQuery to get the number (string) inside the td and make it into a variable, which you can then use to set the width of the div.

Upvotes: 0

MrWhite
MrWhite

Reputation: 45829

As suggested in comments, I have had good success with a single pixel background-image that is stretched to the appropriate percentage background-size of the table cell. This works in all modern browsers (IE9+).

This has the advantage (over using an additional div element to contain the "colored bar") of being independent of any other styling you might want to apply to the table cell, such as text-align, etc. It will naturally appear behind the cells content and flexes to fill the table cell if using percentages.

CSS:

td.bargraph {
    background:transparent url(/img/dot-green.gif) 0 center no-repeat;
    text-align: center;
}

HTML:

<td class="bargraph" style="background-size:<?=$perc?>% 80%"><?=$perc?>%</td>

Where $perc is your calculated percentage.

Upvotes: 4

Calvin Jia
Calvin Jia

Reputation: 856

You can place a div inside another div. Make both divs have the same height. The inner div will have a background color (red). Then you can set the width of the div some % and thats how much it will be filled in.

This is how twitter bootstrap implements its progress bars. If you want a vertically filling bar I think you can set the height to a % and make the widths the same.

Here is the twitter bootstrap example:

http://cssdeck.com/labs/twitter-bootstrap-progress-bars

Click the details tab to see the source code.

A basic implementation example:

<div style="width:50%">
    <div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>

Upvotes: 5

Related Questions