TablePress ─ самый популярный плагин для создания таблиц в CMS WordPress. TablePress поставляется с некоторыми базовыми функциями, но мы можем настроить TablePress с помощью CSS. Как изменить стиль таблиц TablePress с помощью CSS?
Куда поместить CSS-код для стилизации TablePress?
Для размещения вашего CSS-кода…
- Перейдите в панели управления сайта WordPress на вкладку Tablepress в левой части панели.
- Выберите пункт меню «Опции».
- В настройках плагина найдите поле для ввода пользовательского CSS.
Как редактировать стиль шрифта в TablePress?
Если вы хотите изменить стиль шрифта всего содержимого Table Press, поместите этот код в поле CSS…
.tablepress tbody td {
font-family: Georgia;
font-size: 16px;
font-weight: normal;
color: #0325FA;
}Это повлияет на все ваши таблицы, созданные с помощью TablePress.
Если вы хотите применить изменения к определённой таблице, вам нужно ввести в код конкретный идентификатор таблицы.
.tablepress-id-3 tbody td {
font-family: Georgia;
font-size: 16px;
font-weight: normal;
color: #0325FA;
}Замените 3 идентификатором конкретной таблицы.
Как отредактировать стиль шрифта определённого столбца в Table Press?
Если вы хотите настроить стиль шрифта для определённого столбца, вам нужно ввести идентификатор столбца в свой код.
Если вы хотите выделить жирным шрифтом текст столбца 2 для таблицы с идентификатором 5, тогда вы добавляете этот код…
.tablepress-id-5 .column-2 {
font-family: Helvetica;
font-size: 14px;
font-weight: bold;
color: #de2121;
font-weight: bold;
}Вы можете настроить цвет шрифта, семейство шрифтов, размер шрифта определённого столбца, следуя приведённому примеру.
Как изменить цвет фона строки заголовка таблицы?
Поместите этот сокращённый код в пользовательское CSS-поле TablePress, чтобы изменить цвет фона строки заголовка таблицы TablePress.
.tablepress thead th,
.tablepress tfoot th {
background-color: #5DB459;
}Чтобы изменить цвет заголовка при наведении курсора мыши при его сортировке и цвет фона столбца, который сортируется в данный момент, используйте этот код в пользовательском поле CSS…
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #FAF858;
}Если вы хотите применить функции в определённой таблице, примените свой идентификатор таблицы.
Как выделить определённую строку в TablePress?
Вы можете выделить определённую строку желаемым цветом, поместив этот CSS-код…
.tablepress-id-6 .row-4 td {
background-color: #FAF858;
}Измените идентификатор таблицы на идентификатор вашей таблицы.
Как изменить цвет фона по умолчанию для чётных и нечётных строк?
Чтобы изменить цвет фона альтернативных строк по умолчанию, поместите этот код в поле custom CSS…
.tablepress-id-7 .odd td {
background-color: #BCF39D;
}
.tablepress-id-7 .even td {
background-color: #F8BF98;
}Используйте идентификатор таблицы, чтобы применить эти изменения к конкретной таблице.
Как изменить цвет строк при наведении на них
Чтобы добиться такого эффекта, когда при наведения курсора мыши строку таблицы, меняется её цвет, поместите этот код в пользовательское CSS-поле TablePress…
.tablepress .row-hover tr:hover td {
background-color: #ff0000;
}Используйте идентификатор таблицы, чтобы применить этот эффект к конкретной таблице.
Как добавить границы строк и столбцов в TablePress?
Поместите этот код в поле CSS TablePress…
.tablepress-id-8 thead th,
.tablepress-id-8 tbody td {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
}
.tablepress-id-8 thead th:first-child,
.tablepress-id-8 tbody td:first-child {
border-left: none;
}
.tablepress-id-8 tbody .row-1 td,
.tablepress-id-8 tbody {
border-bottom: 1px solid #cccccc !important;
}Измените идентификатор TablePress на свой фактический идентификатор или удалите -id-8, чтобы применить эффект ко всем вашим таблицам.
Этот фрагмент кода создаёт границу в 1 пиксель справа от каждого столбца, исключая последний столбец.
Также добавьте создание границы в 1 пиксель для каждой строки. Вы можете изменить цвет и толщину границы, изменив диапазон пикселя и код цвета.
Как выравнивать текст в TablePress?
Поместите этот код в поле CSS TablePress…
.tablepress-id-5 td,
.tablepress-id-5 th {
text-align: center;
}Измените идентификатор TablePress на свой фактический идентификатор или удалите -id-5, чтобы применить стиль ко всем вашим таблицам.
Если вы хотите выровнять только свой заголовок, введите этот код…
.tablepress-id-5 th {
text-align: center;
}Если вы хотите выровнять только текстовое содержимое, поместите этот код…
.tablepress-id-5 td {
text-align: center;
}Не забудьте изменить идентификатор таблицы. Измените выравнивание текста на «правое» или «левое» в соответствии с вашими желаниями.
Надеемся, что статья поможет вам редактировать таблицы TablePress с помощью CSS.
Страницы в тему:
