Progress bar as table background

Question

I have an HTML table showing a list of people. For each line, I would like to have a different progressbar-like background. Sort of

<table> <tr class="progress-full">...</tr> <tr class="progress-half">...</tr> <tr class="progress-quarter">...</tr> </table> 

With all the background of the first line in color, half secord and 1/4 of the last (with classes or using directly percent in CSS).

I tried using a background with a width ( like here ), but I failed. Is it possible to enclose a div inside tr? When I check the html code (for example: with chrome), the div seems to be outside the table.

 <table style="width: 300px;"> <tr style="width: 75%; background: rgb(128, 177, 133);"> <div style="width: 300px;">...</div> </tr> <tr style="width: 50%; background: rgb(128, 177, 133);"> <div style="width: 300px;">...</div> </tr> </table> 

Or maybe another method?

Answer 1

You can avoid adding extra markup to the table if you use CSS ::before or ::after pseudo-elements . You can give each table row a transparent background and give the pseudo-element the required width.

Here is a jsfiddle example .

HTML

 <table> <tr class="progress-full"> <td>Row 1 Col 1</td> </tr> <tr class="progress-quarter"> <td>Row 2 Col 1</td> </tr> <tr class="progress-half"> <td>Row 3 Col 1</td> </tr> </table> 

CSS

 td { padding: 10px; } tr.progress-full td:first-child, tr.progress-half td:first-child, tr.progress-quarter td:first-child { position: relative; } tr.progress-full td:first-child::before, tr.progress-half td:first-child::before, tr.progress-quarter td:first-child::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: red; z-index: -1; } tr.progress-full td:first-child::before { width: 100%; } tr.progress-half td:first-child::before { width: 50%; } tr.progress-quarter td:first-child::before { width: 25%; } 

This CSS can be reduced, depending on how variable the structure of the table is. I applied styles on the first td inside each tr . If you need the progress bar to td several td s, use a width of more than 100%.

Answer 2

why don't you just put divs or anyother suitable container inside your tds and assign them a width and background color?

something like below:

 <table style="width: 300px;"> <tr> <td> <div class="progress-full" > ... </div> </td> </tr> <tr> <td > <div class="progress-quarter" > ... </div> </td> </tr> </table> 

see this demo

Answer 3

set the percentage width in the div , not tr (also you skipped td s)

http://jsfiddle.net/WmESh/3/

 <table style="width: 300px;"> <tr> <td> <div style="width: 75%; background: rgb(128, 177, 133); overflow:visible;"> <div style="width:300px;"> ... </div> </div> </td> </tr> <tr> <td> <div style="width: 50%; background: rgb(128, 177, 133); overflow:visible;"> <div style="width:300px;"> ... testing sdfsdfsdfsd sdfsdsdf sdf sdfsd fsd fsd fsdfsdff sdfsdfsd </div> </div> </td> </tr> </table> 

if you do not want the content to be the full width of the table, just delete <div style="width:300px;"></div>

Answer 4

Using @mwcz answer.

In HTML (I use a branch, but you can get this idea):

 <td class="text-right pie-progress pie-progress-share{{ (count/totalCount)|round }}">{{ count }}</td> 

In CSS:

 td.pie-progress { position: relative; } td.pie-progress::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #66afe9; z-index: -1; } td.pie-progress-green::before { /* example of other color */ background-color: #66af66; } td.pie-progress.pie-progress-share1::before {width: 1%;} td.pie-progress.pie-progress-share2::before {width: 2%;} ... td.pie-progress.pie-progress-share100::before {width: 100%;} 

Answer 5

the way to do this is to make the image with the desired color, the desired color and half a space, the desired color and 3/4 empty, and also use a bacjground image.

he is dirty but simple