Добавьте две верхние границы в строку таблицы с помощью CSS - PullRequest
Новая
       7

Добавьте две верхние границы в строку таблицы с помощью CSS

0 голосов
/ 21 марта 2012

Как можно добиться эффекта, аналогичного http://jsfiddle.net/eLWe3/2/,, но без дополнительной разметки?

Я пробовал с tr:before {}, но это портит таблицу.Решение должно работать с IE8 и выше, откат к единой границе в IE7 - это нормально.

Ответы [ 3 ]

2 голосов
/ 21 марта 2012

Эта вилка вашего оригинального примера настолько близка, насколько я смог получить.Обновленный код CSS: 

table { margin: 0 auto; border-collapse:separate; }
thead { background: #FDECEE; }
th { font-weight: bold; }
tbody tr:last-child td { border-bottom: 1px solid blue; }
tfoot td { border-top: 1px solid pink; }

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

Редактировать - Я создал новый пример , который использует сгенерированный контент для получения нужного вам пробела: 

tbody tr:last-child td:after {
    content:''; 
    display:block;
    border-bottom: 1px solid blue;
    margin-bottom:2px;
}​

Он работает в Firefox, Chrome и IE9 +, отступая к единой границе для менее способных браузеров.Единственная причина, по которой IE8 дает сбой, заключается в том, что ему не хватает поддержки last:child для нацеливания на последнюю строку в tbody.Вы можете добавить класс в последнюю строку таблицы (напрямую или с помощью JavaScript), чтобы он работал в этом браузере.

0 голосов
/ 21 марта 2012

Может быть, это приемлемая альтернатива: 

tbody {
    border-bottom: 2px outset pink;
}
0 голосов
/ 21 марта 2012

не очень хорошая идея, но использовать фоновое изображение в соответствующей строке / ячейке

...