CODEWITHSUNDEEP
csshtml-tableprogress
Martin Trigaux
Martin Trigaux

Reputation: 5401

Progress bar as background of table

I have an HTML table showing a list of person. For each row, I would like to have a different progressbar-like background. Something like 

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

With the whole background of the first row in color, half of the secord and 1/4 of the last one (with classes or using directly the percentage in CSS).

I tried using a background with a width (like here) but I didn't succeed. Can I enclose a div inside a tr ? When I inspect the html code (eg: with chrome) the div seems outside of 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 ?

Upvotes: 4

Views: 8718

Answers (5)

luchaninov
luchaninov

Reputation: 6786

Using @mwcz answer.

In HTML (I use twig but you can get the 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%;}

Upvotes: 0

mwcz
mwcz

Reputation: 9301

You could avoid adding any extra markup to your 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 width you want.

Here's a jsfiddle example.

enter image description here

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 could be slimmed down, depending on how variable the table structure is. I applied the styles onto the first td inside each tr. If you need the progress bar to stretch across multiple tds, use a width of greater than 100%.

Upvotes: 5

Pete
Pete

Reputation: 58422

put the percentage width on the div rather than the tr (also you missed the tds)

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 the <div style="width:300px;"></div>

Upvotes: 1

Manish Mishra
Manish Mishra

Reputation: 12375

why don't you simply put divs or anyother suitable container inside your tds and assign them 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

Upvotes: 1

wazaminator
wazaminator

Reputation: 245

a way to do it is to make an image with the color you want, the color you want and half blank, the color you want and 3/4 blank, and use bacjground-image.

it's dirty,but simple

Upvotes: -1

Related Questions