Div и Table

[Nanto]

Можно ли вставить блок в ячейку таблицы так, чтобы их границы (бордеры) совпали?

Т.е. надо сделать таблицу, в первой строке которой нет верхнего бордера, зато он есть у одной ячейки этой строки, причём с border-radius.

Через таблицы закругление углов не особо реально (не подсовывать же png с закруглённым бордером бэкграундом ячейки...), а вот убрать у ячейки бордеры и запихнуть в неё div с бордером... Но -1px смещения на толщину бордеров остально таблицы...

Варианты?

[Softlink]

А чем нереален border-radius для ячейки таблицы? Почему нельзя убрать всем ячейкам верхний бордер и оставить какие нужны?

[Nanto]

Не знаю... Щас перепроверю, но FF до этого не отобразил.

[Great Rash]

Можно сделать совсем кошерно если ИЕ7 и ИЕ8 не нужны:

div.td {
  display: table-cell;
  border-radius: 5px;
  border: 1px solid;
}

[Nanto]

Щас потестил - нашёл в чём заковыка...

border-collapse:collapse

не позволяет сделать закругление.

Вот блин! А у меня бордеры и у ячеек, и у строк... Придётся химичить...

[Nanto]

Зря тему заводил... Ступил!

Отключение border-collapse - это зло!

А вот засунуть в ячейку div и прописать ему

margin:0 -1px;

, почему-то мозгов сразу не хватило!

Edited September 27, 2011 by Nanto

[Nanto]

Обалдеть! Нифига не просто оказалось!

Пришлось такие костыли лепить!..

Оказывается Опера, IE и Хром при отрицательном margin у div в ячейке (и border-collapse) смещают правую границу, а FF смещает левую! Причём все браузеры смещают только одну границу, хотя бордеров два (border-collapse видимо влияет)...

Пришлось прописывать margin:0 -1px 0 0; и хаком для Мозиллы:0 0 0 -1px...

Дурдом какой-то! Неужто нельзя проще?

[Softlink]

Покажите картинку, как должно получиться

[Nanto]

[Softlink]

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

Вот так можно сделать к примеру http://jsfiddle.net/vntrY/

[Nanto]

Да, в примере работает как надо, а вот у меня, при отключении border-collapse, вот такая ерунда на стыках выходит:

То ли границы-поля-отступы где недообнулил, то ли ещё что...

[Softlink]

так вы обнулите отступы между ячейками. Посмотрите внимательно в примере, там стоит border-spacing:0px;. Можно это сделать инлайн через cellscpacing="0" А border-collapse тут вообще нафиг не нужен.

[Nanto]

Тьфу блин...

Спасибо большое!