W3.CSSプログレスバーはテーブルの同じ行にテキストとバーを表示できません

Question

私はシンプルなCSSプログレスバー（jQuery/JSなし）が必要です。私は<progress></progress>と<meter></meter>を使用して試してみましたが、それはIE11とChromeの両方で正しく機能し得ることができない62

理想的には私は、プログレスバーの内側に埋め込まれた割合を示すことができたが、テキストが時に読めるのどちらかではないように私はそれをあきらめています0％または100％ですので、私はプログレスバーの隣にパーセンテージを置くことに決めましたが、これは明らかに容易ではありません。

w3schools Progress Barは私が欲しいものに最も近いものとして使用しています。私はプログレスバーを表示したいテーブルを持っていますが、テキストとプログレスバーがあるときは常にテキストの後に改行が置かれ、テーブル全体が高さが増えたためにもっと大きくなります。

私はを<td>で試してみましたが、他にも失敗しました。

私はこのPHPコードを持っている：

[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] 

私はこれを取得する - それが "10％" の後に改行があります

をしかし、私はそれがこれを表示する - 1行上のすべて：

多分プログレスバー内のテキストをセンタリングすることが考えられます。

これはJSFiddle demoです。

また、IE11とChrome 62と2つの提案をサポートする良いHTML/CSSプログレスバーを誰かが指し示すことができれば、おそらくこれもうまくいくかもしれません。

更新＃1 - さらに明確化：

私はポール・ソリューションを使用してみましたが、それは少しのに役立ちますが、それは私のすべての方法を取得していません。たとえば、最初の投稿ではパーセンテージの数字を右側に合わせて読みやすくするようにはしていませんが、バーの前に表示する必要がありますが、バーをより細くしたいと思います。

私は今、この持っている：私はポール・ソリューションと私は今持っていると私のフィドルを更新しました

：

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

アップデートを私はこれをしたい

を＃2 - 解決策を受け入れる：

私は今、ポール・ソリューションを使用していると私は実用的なソリューションが含まれるように、私のJSFiddleを適応している：

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

Answer 1

おかげで混乱をクリアします。プログレスバーの上に余白を追加し、その割合を右に揃えてプログレスバーの横にとどめました。以前の答えで言ったように、より小さいデバイスから見るときに何か他のことをしたい場合は、@mediaクエリを追加する必要があります。

<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>