- ベストアンサー
表の中の割合のバーを背景で付けるには
表を作っていまして、その表には８０％や３５％のような割合の数字が入っています。 ８０％のセル（表の中の１つ）には左からバーが８５％くらいまでくるような処理を行いたいと思っています。もちろんバーの上には「８０％」の文字がcenterで乗るように。 イメージ的にはOffice 2007のエクセルでも同じような機能があったと思います。 backgroundでイメージは指定することができるのですが、この画像のサイズを変更してあげればいいのかなと考えていますが、サイズ指定の方法がわかりません。 知っている方、ご教授ください。
- goroneko-begin
- お礼率38% (62/159)
- HTML
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ％表示するとウィンドウに対しての％表示になるので計算値が必要になってきますが・・・ <style type="text/css"><!-- table { width:500px; } .bar { background-color:red; position:absolute; } .text { width:500px; text-align:center; position:absolute; } --></style> <table border="1"> <tr> <td><div class="bar" style="width:400px;"> </div><div class="text">80%</div> </td> </tr><tr> <td><div class="bar" style="width:175px;"> </div><div class="text">35%</div> </td> </tr><tr> <td><div class="bar" style="width:5px;"> </div><div class="text">1%</div> </td> </tr> </table>  :は全角スペースという意味なのですがこれで高さ確保や<td>がセルであると認識させてるので必須になります
その他の回答 (4)
- 1412lovers
- ベストアンサー率40% (58/144)
<style type="text/css"><!-- .bar { background-color:red; text-align:center; } p{ line-height: 20pt; } --></style> <title>Untitled</title> </head> <body> <table width="500" border="1"> <tr> <td><div class="bar" style="width:80%;"></div> <DIV STYLE="position: absolute; left: 250; top: 20; z-index: 1; text-align:center;"> 80%</div></td> </tr><tr> <td><div class="bar" style="width:35%;"></div> <DIV STYLE="position: absolute; left: 250; top: 40; z-index: 1; text-align:center;">35%</div></td> </tr> </table> 下の方のソースに少し追加しただけですが如何でしょうか。 <DIV STYLE="position: absolute; left: AAA; top: BB; z-index: 1; text-align:center;"> left: AAA; のAAA部分にテーブル全体の半分の数字を（500なら250、300なら150という風に）を指定。 top: BB; のBB部分はページ全体の上からどれくらいの位置、という指定なので、都度必要に応じて訂正をお願いします。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは こんなやつですか？ <style type="text/css"><!-- .bar { background-color:red; text-align:center; } --></style> <table width="500" border="1"> <tr> <td><div class="bar" style="width:80%;">80%</div></td> </tr><tr> <td><div class="bar" style="width:35%;">35%</div></td> </tr> </table> backgruond-colorにしてますがbackground-image:url(***.gif);でもできます
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
補足です。m(_ _)m > サイズ指定の方法がわかりません。 <img src="bar.gif" width="224" height="10"> widthとheightを書いてください。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
280円のお菓子、20%引で何円ですか？（280円の80%は何円ですか？）
お礼
イメージした物は微妙におしいです。 文字の位置は”表の幅を基準に”センタリングで、バーはそのままのイメージです。 なぜならば1%とかなると文字が見えなくなるからです。 ご存知であれば。 コメントありがとうございます。