пятница, 27 января 2012 г.

Использование border-radius с таблицами

При верстке одного из новых проектов столкнулся с эскизом, в котором таблицы имели скругленные углы. При этом использовать изображения это моветон. Выбор пал на использование возможностей CCS3.
Первой была попытка решить проблему “в лоб” с
помощью следующего кода.


  1. table {
  2.   -moz-border-radius:10px;
  3.   -webkit-border-radius:10px;
  4.   border-radius:10px}
При этом я не получил ожидаемого результата. Стоит отметить, что в коде так же использовался полный сброс стилей (reset.css). Пришлось изучить проблему более детально.

Для начала было решено попробовать округлять края строки, но при этом внутренняя ячейка все равно давала прямой угол. Если применять border-radius исключительно к внутреннему угловому блоку TD, то мы явно видим его внутреннее округление, но при этом нижняя рамка блока все равно не округляется.

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

Без использования collapsed
Колонка 1Колонка 2Колонка 3
112
358
132134
5589144
233377610

С использованием сollapsed
Border-radius не подействовал на таблицу с установленным border-collapse:collapse.
Установка cellspacing=0
Колонка 1Колонка 2Колонка 3
112
358
132134
5589144
233377610
Конечный вариант стилей для скругления улов в таблице:
  1. .table tbody tr:last-child td:first-child {
  2.     -webkit-border-bottom-left-radius: 5px;
  3.     -moz-border-radius-bottomleft: 5px;
  4.     border-bottom-left-radius: 5px;
  5. }
  6. .table tbody tr:last-child td:last-child {
  7.     -webkit-border-bottom-right-radius: 5px;
  8.     -moz-border-radius-bottomright: 5px;
  9.     border-bottom-right-radius: 5px;
  10. }
При этом для таблицы необходимо выставить такие стили:
  1. .table {
  2.     border-collapse: separate;
  3.     border-spacing: 0;
  4. }
Удачных экспериментов!