Таблицы, позиционирование и задача

[Zverushka]

http://jsfiddle.net/7R4a9/1/

Вот эффект, который должен получится (видно в хроме).

В мозилле не работает по понятным причинам.

Вопрос - как сделать тоже самое в мозилле?

Можно использовать лишние обертки и хаки. Цифры всегда должны быть вертикально посередине (то есть если мы оборачиваем цифры в обычный див - их уже не выровнять по центру, а высота ячейки изначально неизвестна).

я использую в том числе jquery для решения проблемы, но дело в том. что таблица при загрузке невидима и нужно будет при каждом открывании таблицы высчитывать высоту div и line-height (для решения проблемы). но мне этого делать не хочется (плюс line-height не самое лучшее решение - вдруг данные в ячейке перескочат на новую строку). Если же обернуть цифры в div с table-cell, то она не хочет тянуться ни по ширине, ни по высоте - тоже проблема.

Edited January 10, 2014 by Zverushka

[k0d]

А скажите, картинки можно использовать?

[klierik]

Засунуть бордер в base64 и забыть.

В данном случае это не та задача которая требует более 1 мин. раздумий. Любой другой вариант будет нерентабелен.

 

пример:

.rating {    background-image: url(../images/blocks/rating/star.png);    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...);}

[k0d]

Засунуть бордер в base64 и забыть.

 

Да, я вот тоже картинкой хотел. То есть:

td {  ...some...  border: url(line.png) и позицию этого фона в процентах;  background:some;}

[Zverushka]

Спасибо. Вообще в голову не пришло (...

[Zverushka]

Блин - теперь создается эффект выступающего хвостика с картинкой и background-clip не помог... 

http://jsfiddle.net/sg5gV/ - много кода - но по самым нижним маленьким ячейкам видно...

[klierik]

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

кстати, бордер в цвет фона никто не отменял.

[Zverushka]

Убрала - это артефакт 

http://jsfiddle.net/sg5gV/2/ - все равно торчит.

Должно быть вот так. Оно так и получается, если позиционировать через Positon в хроме.

Edited January 10, 2014 by Zverushka

[klierik]

покажи скрин макета всей таблицы

 

повторюсь еще раз: все(!) ячейуки таблицы должны или иметь или не иметь border

[Zverushka]

Как видно не все ячейки имеют границы)....

Edited January 10, 2014 by Zverushka

[klierik]

Как видно не все ячейки имеют границы)....

 

нет, не так.

Не все ячейки имеют видимую границу.

 

Сейчас попробую на скорую руку накидать...

[klierik]

вот: http://jsfiddle.net/klierik/sg5gV/4/

до конца не делал, но для примера хватит.

 

в левой колонке бордеры не обнуляются, а "закрашиваются" в цвет фона.

в верушке все по аналогии.

 

а вот на беуюй линию, в самом низу таблицы, я предлогаю забить.

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