Нестандартные бордеры

[chiffenok]

Возникла проблема при верстке достаточно не стандартных бордеров в таблице, см. ниже

Решение которое я выбрала это положить в ячейки div, что бы ему задать margin left и right и ему же добавить border-bottom. Но возникает проблема div по высоте занимает высоту контента и нижний бордер не на одном уровне результат-http://jsfiddle.net/chiffenok/KqNS7/

Объясню, почему я использую внутри дивы: если посмотреть на горизонтальные границы между строками они с разрывами. Что бы сделать такие разрывы подходит маржин слева и справа но маржин не действует на ячейки таблицы. А если просто применить бордеры к ячейкам то они будут слитные. Атрибуты cellspacing и cellpadding здесь не помогут

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

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}

$(document).ready(function() {
setEqualHeight($(".b-product_position_content .i-product__list-item"));
});

как можно решить эту проблему? может каким нибудудь другим способом? или есть скрипт другой?

Edited April 18, 2012 by chiffenok

[Nanto]

какие дивы?

Это элементарно делается голой таблицей!

[chiffenok]

какие дивы?

Это элементарно делается голой таблицей!

бесмысленый пост, тогда подскажите как?

Объясню, почему я использую внутри дивы: если посмотреть на горизонтальные границы между строками они с разрывами. Что бы сделать такие разрывы подходит маржин слева и справа но маржин не действует на ячейки таблицы. А если просто применить бордеры к ячейкам то они будут слитные. Атрибуты cellspacing и cellpadding здесь не помогут

[Nanto]

Так пойдёт?

http://jsfiddle.net/KqNS7/3/

[chiffenok]

Так пойдёт?

http://jsfiddle.net/KqNS7/3/

спасибо, интересное решение, но нужно без пустых td, они не симантичны, начальник сразу забракует

да, и это будетингрироватся потом в cms, строк в таблице может быть много

Edited April 18, 2012 by chiffenok

[Viper]

Если так?

http://web-viper.com/test/test.html

[chiffenok]

благодарю, отличное решение. там токо border-spacing: 10px 0; что бы не было разрыва у вертикальных бордеров, но это я уже так

вот еще один вопрос, у последний строки вертикальный бордер не доходит до горизонтально пикселов на 10 , прилагаю скриншот, можно это как нибудь сделать например с помощью :last-child?

[Viper]

Обновил - http://web-viper.com/test/test.html

Основа метода - псевдоэлемент :before. Если решение понравиться, хак для кроссбраузерности :before - не проблема.

:last-child не работает в ИЕ ниже 9-го, что бы не нагромождать ослика хаками, лучше для last tr задавать класс... в общем как в моем примере

[chiffenok]

Обновил - http://web-viper.com/test/test.html

чет не поняла ни че же не изменилось

Основа метода - псевдоэлемент :before. Если решение понравиться, хак для кроссбраузерности :before - не проблема.

:last-child не работает в ИЕ ниже 9-го, что бы не нагромождать ослика хаками, лучше для last tr задавать класс... в общем как в моем примере

:before для него делала хак, а вот :last-child и :first-child -нет , но не думаю "для last tr задавать класс" это лучшее решение, ведь количество строк в таблице может менятся, а значит прийдется програмным способом находить последнию строку

[Viper]

чет не поняла ни че же не изменилось

Ой... а щас?

а значит прийдется програмным способом находить последнию строку

Ну ячейки же будут динамически формироваться в шаблоне? Это обычная задача PHP-программиста... ну или того, кто шаблонизирует. Хаки всегда, при возможности, нужно избегать. Лучше их тогда вообще не писать: Если ослик будет не такой как все - он переживет и будет двигаться дальше, а если его перегрузить - он не то что не двинеться с места, он копита откинет )) бедный наш ослик...

Edited April 18, 2012 by Viper

[troll]

Viper, а в Лисе можно починить без обертки?

Edited April 18, 2012 by troll

[Viper]

Viper, а в Лисе можно починить без обертки?

Обновил. Забыл про "особенность" Лисы...

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

Может "обертка" и не такой плохой вариант? )) Может же не будет на страницах по 20+ таких ячеек...

П.С. Куча хаков и не дай бог лишний JS, куда хуже 10-20 лишних "оберток" ( DOM обьектов )... ИМХО

[troll]

Обновил. Забыл про "особенность" Лисы...

Странно, у меня ничего не поменялось.

[Viper]

Странно, у меня ничего не поменялось.

А какая у вас версия FF? Смотрю на 11-й, работает... Или может я не правильно понял задачу...

Если вы тоже под 11-й, можете обьяснить, что не так? )

[troll]

Я сам дурак, смотрел с отключенными картинками)

Edited April 18, 2012 by troll