Как заставить Divs правильно работать в HTML-таблице

Question

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

По сути, мне нужно составить график бюджета США.дефицит и опишите некоторые ключевые даты.

Однако гистограмма вызывает у меня некоторое горе.Ранее я строил графики, генерируя изображение с помощью php, но я решил, что с таким же успехом могу улучшить свои навыки работы с html (я как-то выучил PHP, javascript и css до html).

Прямо сейчас, таблицаидеально, за исключением того факта, что мои div (мои бары) не отображаются должным образом в соответствующей ячейке.

В основном, таблица имеет 31 столбец (представляющий даты 1980-2010), и я пытаюсьпоместить внутри него цветной элемент div, чтобы он выглядел как полоса.

    Column
 ------------
|            |
|            |
|            |
|            |
|            |
|            |
|            |
|  --------  |
| |        | |
| |  Div   | |
| |        | |
| |        | |
| |        | |
| |        | |
 ------------

Страница находится здесь: здесь .

Как видите, нет никаких баров, появляющихся.Почему это может быть?Я использую инструмент проверки элементов в Google Chrome и не могу обнаружить ничего подозрительного.

Answer 1

я заметил, что вы устанавливаете высоту div в качестве атрибута HTML.И это не работает.Установите высоту в атрибуте style и в единицах измерения, например style="height: 234px", и это прекрасно работаетЯ только что проверил это с Firebug.

Answer 2

Полный супер чистый способ - написать всю страницу в div.

Проблема в том, что в DIV нет содержимого. Лично я бы создал «прокладку» высотой в 1 пиксель для нужного вам цвета (цвета), а затем отправил бы высоту в% к соответствующей высоте. (это вы также можете изменить на стороне клиента javascript (или jquery), это будет отображаться в большем количестве браузеров, и вы можете добавить блеск к прокладке и т. д.

Причиной для изображения является необходимость в DIV "твердых" объектов, таких как текст или изображения, просто попробуйте ввести "& nbsp;" в вашем div. Это должно тогда показать ...

Это работает:

<td style="vertical-align:bottom">
        <div width="30" style="background-color:#FF0000; height:50%;">&nbsp;</div>
</td>

@ Sarfraz, эта статья написана в 2007 году и содержит ошибки в браузерах (см. Комментарии)