Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на 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;
}

Готово. Пользуйтесь.

источник