Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.
Практические CSS3 таблицы с закругленными углами
Существуют некие дискуссии о том, когда и как использовать таблицы в веб-разработке. Вывод один: когда мы имеем дело с табличными данными, таблицы просто необходимы.
Проектирование дизайна таблицы всегда является сложной задачей. Если ваша таблица трудно сканируется взглядом, как правило, раздражает пользователей, они теряют фокус и путаются в столбцах и строках.
Сегодня мы создадим красивую таблицу с иcпользованием CSS3. Так же будем использовать jQuery для совместимости с некоторыми браузерами.
И что хорошего в оформлении этих таблиц?Здесь вы увидите, как можно совмещать CSS3 и таблицы, для того, что бы получить полезный и красивый результат.
- закругленные углы без использования изображений
- легкость обновления – нет дополнительных CSS идентификаторов и классов
- удобно и легко читается.
Закругленные углы таблицы
Используем трюк: в то время как свойство border-collapse и имеет значение separate, нужно установить для свойства border-spacing значение 0.
table { *border-collapse: collapse; /* Для IE7 и ниже */ border-spacing: 0; }
Для IE7 и ниже нам необходимо добавить специальную строку, для обеспечения совместимости вывода таблицы.
Затем нам просто нужно закруглить некоторые углы:
th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }
Обратная совместимость с использованием jQuery
Возможно Вы уже знаете, что когда речь идет о IE6, то :hover работает только для элементов ссылок.
Поэтому вместо CSS-кода:
.bordered tr:hover{ background: #fbf8e9; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
вы можете использовать решение на jQuery для имитации эффекта при наведении:
$('.bordered tr').mouseover(function(){ $(this).addClass('highlight'); }).mouseout(function(){ $(this).removeClass('highlight'); });
А вот стиль для класса highlight, который используется в JavaScript коде:
.highlight{ background: #fbf8e9; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
Создаем эффект зебры
Для создания эффекта зебры, используя CSS3, выбираем четные строки в tbody.
.zebra tbody tr:nth-child(even) { background: #f5f5f5; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
Выше приведенный CSS3-селектор не поддерживается в старых браузерах. Ниже приведен jQuery-код, который позволит добиться эффекта зебры во всех браузерах:
$(".zebra tbody tr:even").addClass('alternate');
А также стиль класса для JavaScript кода:
.alternate { background: #f5f5f5; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
Готово. Пользуйтесь.
источник