Красивая таблица css

Число просмотров: 2 465 |







Красивая таблица css

Красивая таблица css

Иногда в шаблонах WordPress таблицы выглядят очень некорректно.  Эта проблема решается очень просто — нужно подправить стили для таблицы.

Открываете файл стилей вашего шаблона (называться он может по разному, в большинстве случаев: style.css ) и находите уже вписанные в ваш шаблон стили для Таблицы.

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

/* tables */
 table {
 border-collapse: collapse;
 text-align: left;
 margin-bottom: 20px;
 width:auto;
 font-size: 12px;
 color: #000000;
 }
 th.empty {
 background: #fff;
 }
 tr.empty:hover {
 background: #fff;
 }
 th {
 background-color: #aaaaaa;
 font-weight: normal;
 font-size: 15px;
 padding: 0 10px;
 color: #fff;
 text-shadow:#414141 0 1px 0px;
 line-height: 40px;
 }
 tbody tr {
 font-weight: normal;
 background-color: #ffffff;
 }
 tbody tr:nth-child(even) {
 background-color: #ffffff;
 }
 tbody tr:hover {
 background-color: #eaeaea;
 }
 td {
 padding: 9px 10px;
 border-left: #d7d7d7 1px solid;
 border-top: #d7d7d7 1px solid;
 border-bottom: #d7d7d7 1px solid;
 line-height: 20px;
 }
 tr td:first-child {
 border-left:0;
 }

В итоге вы получите стили, как показано на скриншоте. Серая полоска — это я навел мышкой на ячейку.

Данный код имеет настройки, где  eaeaea — цвет при наведении.

tbody tr:hover {
background-color: #eaeaea;

***

Сайт дня: статьи о seo и другая полезная информация на сайте bigfozzy.com



Твитнуть









Отблагодарить проект myhelps.ru:




Комментарии: