Статьи

Практичные таблицы CSS3 с закругленными углами

Ноябрь 22, 2018

В прошлом было некоторое обсуждение того, как / когда использовать таблицы в веб-разработке. Тем не менее, вывод тот же: когда вы имеете дело с табличными данными, таблицы абсолютно необходимы.

Разработка таблицы — это сложная задача, и здесь я говорю не только о том, как она выглядит. Это (в основном) о том, насколько легко читать ваш стол . Если вашу таблицу нелегко сканировать, обычно пользователи раздражаются, поскольку теряют фокус при попытке найти правильный столбец и строку.

Сказав это, сегодня мы собираемся создать красивые и практичные таблицы, стилизованные с использованием CSS3. Кроме того, jQuery будет использоваться для создания запасных вариантов для старых браузеров.

Посмотреть демо

Что такого классного в этих таблицах?

В этой статье вы увидите, как CSS3 и таблицы могут работать вместе, чтобы создавать интересные и полезные результаты.

  • Закругленные углы без изображений
  • Очень легко обновить — нет дополнительных CSS идентификаторов или классов, добавленных
  • Удобный и легкий для чтения

Закругленные углы стола

Вот в чем трюк: хотя значение по умолчанию border-collapse является отдельным, нам также необходимо установить для border-spacing значение 0.

table {
    *border-collapse: collapse; /* IE7 and lower */
    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');
});

и вот также стили для класса подсветки CSS:

.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;
}

Вышесказанное — в основном дубликат tr: hover.

JQuery Zebra Fallback

Чтобы создать эффект зебры , используя CSS3, мы выбрали четные строки в теле:

.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 — так что нет поддержки для старых браузеров. Ниже вы увидите, как мы можем нацеливать и стилизовать четные строки для всех браузеров :

$(".zebra tbody tr:even").addClass('alternate');

Простая линия JQuery.

.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;
}

Класс CSS, который будет стилизовать четные строки.

Поддержка браузера

Таблицы уже хорошо работают в старых браузерах, так что вам решать, хотите ли вы использовать вышеупомянутые решения jQuery. Все дело в целевой аудитории посетителей.

Посмотреть демо

Вывод

Вам нравятся таблицы CSS3, которые я сделал? Не стесняйтесь комментировать об окончательном результате и спасибо за чтение этой статьи!

41
Share: