Таблица со значениями и графиком

IVB · July 25, 2008

Хочу сделать табличку с числами, и в _этих_ же ячейках фоном цветная полоска, длина которой пропорциональна числу в ячейке. И никак не могу придумать правильные стили, чтобы число располагалось _на_ фоне, а не слева/справа/снизу/сверху. Подскажите, пожалуйста, как это реализовать.

klierik · July 25, 2008

рисунок в студию, пожалуйста.

IVB · July 25, 2008

рисунок в студию, пожалуйста.

Примерно так:

picture.php?albumid=200&pictureid=2230

IVB · July 28, 2008

и зачем было рисунок просить?

IVB · August 4, 2008

вопрос все еще актуален...

Fu-tai · August 4, 2008

Примерно так

<style>
td span {
 display: block;
 backgroung-color: цвет шкалы;
 width: размер шкалы;
}

</style>



<tr>
 <td>Петров</td>
 <td><span>25</span></td>
</tr>
<tr>
 <td>Сидоров<td>
 <td><span>50</span></td>
</tr>

Если завязать все это на джаву то все должно работать.

IVB · August 26, 2008

Примерно так

К сожалению, IE "так" не хочет.

Генерится вот такой кусок:

<tr><td align="left" nowrap><span class="bar-ltr" style="width: 58%;">28`549,00</span></td></tr>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 49%;">23`875,89</span></td></tr>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 32%;">15`684,01</span></td></tr>

Стили описаны следующим образом:

.bar-ltr {
  display: block;
  overflow: visible;
  height: 100%;
  background: #DBE2EA;
  }

Получается вот так, а должно быть вот так (т.е. в IE минимальная ширина фона зависит от длины текста).

Т.е. правильнее всего сначала нарисовать прямоугольник, а потом поверх него (с той же позиции) вывести текст - но я так не умею.

Edited August 26, 2008 by IVB

Dimitry Wolotko · August 26, 2008

Поиграйтесь со значениями top.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<html>
<head>
	<title>Untitled</title>
	<style>
	.bar-ltr {
  display: block;
  overflow: visible;
  height: 100%;
  background: #DBE2EA;
  }
  .pos {position:relative;left:0px;top:-18px;}
	</style>
</head>
<body>
<table>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 85%;"></span><span class="pos">28`549,00</span></td></tr>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 10%;"></span><span class="pos">28`549,00</span></td></tr>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 1%;"></span><span class="pos">28`549,00</span></td></tr>
</table>
</body>
</html>

IVB · August 27, 2008

Поиграйтесь со значениями top.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<html>
<head>
	<title>Untitled</title>
	<style>
	.bar-ltr {
  display: block;
  overflow: visible;
  height: 100%;
  background: #DBE2EA;
  }
  .pos {position:relative;left:0px;top:-18px;}
	</style>
</head>
<body>
<table>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 85%;"></span><span class="pos">28`549,00</span></td></tr>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 10%;"></span><span class="pos">28`549,00</span></td></tr>
<tr><td align="left" nowrap><span class="bar-ltr" style="width: 1%;"></span><span class="pos">28`549,00</span></td></tr>
</table>
</body>
</html>

В этом примере - еще хуже.

В IE каждая ячейчка в два раза выше, чем нужно. В FF ползунок не виден, зато текст оказывается на строку выше (в предыдущей ячейке)

Dimitry Wolotko · August 28, 2008

Вы от меня готовое решение ждёте что ли?

Я вам дал вариант, который при наличии желания, документации и напильника работает так, как нужно вам.

IVB · August 28, 2008

Вы от меня готовое решение ждёте что ли?

Не от Вас лично, но действительно хотелось бы получить готовое решение от тех, кто уже потрахался с документацией и напильником и нашел его.

Я вам дал вариант, который при наличии желания, документации и напильника работает так, как нужно вам.

Перед тем, как задавать вопрос на форуме, я перепробовал много разных вариантов - ни один не работает так, как нужно. Поэтому и обратился на форум - в надежде, что кто-нибудь поделится готовым решением. Наверняка ведь кто-то сталкивался с аналогичной задачей и решил ее.

Dimitry Wolotko · August 28, 2008

Да врядли.

Некрасиво это выглядит.

Чаще такие варианты встречаю:

25% ||||||||||
50% ||||||||||||||||||||
12% ||||||
12% ||||||

или

|||||||||| 25% 
|||||||||||||||||||| 50% 
|||||| 12% 
|||||| 12%

Sign In

Таблица со значениями и графиком

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information