CODEWITHSUNDEEP
htmlcsshtml-tableprogress-bar
Beauvais
Beauvais

Reputation: 2279

W3.CSS progress bar cannot show text and bar at same line in a table

I am in the need for a simple CSS progress bar (no jQuery/JS). I have tried using <progress></progress> and <meter></meter> but cannot get it working correctly in both IE11 and Chrome 62.

Ideally I could show the percentage embedded inside the progress bar but I have given up on that as the text is either not readable when 0% or 100%, so I have decided to put the percentage next to the progress bar - but this is apparently not easy either.

I am using the w3schools Progress Bar as it get closest to what I want. I have a table where I want to show the progress bar in but when I have the text and the progress bar it always put a newline after the text, making the entire table to be much larger due to the increased height.

I have tried the { white-space: nowrap } on <td> and many other things that also failed.

I have this PHP code:

[CUT]
$final = "10%";
$color = $final == "100%" ? "w3-green" : "w3-blue";
echo "<td align='left'>$final ";
echo "<div class='w3-light-grey w3-small progress'>";
echo "<div class='w3-container $color w3-round' style='width:$final'></div>";
echo "</div>";
echo "</td>";
[CUT]

I get this - it has a newline after "10%": enter image description here

But I want it to show this - everything on one line: enter image description here

Maybe even it could be possible to center the text inside the progress bar: enter image description here

I have this JSFiddle demo for it.

Alternatively if anyone can point me to a good HTML/CSS progress bar that can support IE11 and Chrome 62 and my two proposals this could probably also be fine.

Update #1 - further clarification:

I have tried using Pauls solution and it helps a little but it does not get me all the way. For example I would like the bar to be thinner, though I did not state that in my first post and the percentage number should be aligned to the right, to make it more readable - but it should still be shown before the bar.

I now have this: enter image description here

I want this: enter image description here

I have updated my Fiddle with Pauls solution and what I have now:

https://jsfiddle.net/yz9nn0ck/4/

Update #2 - solution accepted:

I have now used Pauls solution and I have adapted my JSFiddle to include the working solution:

https://jsfiddle.net/yz9nn0ck/6/

Upvotes: 1

Views: 923

Answers (1)

Paul
Paul

Reputation: 94

Thanks for clearing the confusion. I added a top margin to the progress bar and made the percentage align to the right so it stays next to the progress bar. As I said in my previous answer, you should add an @media query if you want it to do something else when viewing from smaller devices.

<table width="100%" border="1">
  <!-- Row 2 -->
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td style="width: 25%">
      <div style="width: 25%; float: left; text-align: right;">
        50%
      </div>
      <div class="w3-light-grey" style="width:75%; float: right;">
        <div class="w3-green" style="height:10px;width:50%; margin-top: 6px;"></div>
      </div>
    </td>
    <td>Column 4</td>
  </tr>

Upvotes: 1

Related Questions