В TablePress нет встроенной панели редактора для настройки высоты и ширины столбца или строки, но мы можем сделать это с помощью CSS-кода. Как настроить высоту и ширину в TablePress?
Как настроить высоту строк в TablePress?
Чтобы настроить высоту строк в TablePress, мы должны добавить отступы в строках. Поскольку свойства заполнения CSS используются для создания пространства вокруг содержимого элемента внутри любых определённых границ.
Отрегулируйте высоту строк, включая заголовок таблицы
.tablepress-id-4 thead th, .tablepress-id-4 tbody td { padding-top: 20px; padding-bottom: 20px; }
Измените .tablepress-id в соответствии с вашим фактическим .tablepress-id и измените значение отступа в соответствии с вашими требованиями.
Отрегулируйте высоту конкретных строк, включая заголовок таблицы
.tablepress-id-4 thead th, .tablepress-id-4 .row-3 td { padding-top: 20px; padding-bottom: 20px; }
Измените номер строки в соответствии с вашими требованиями.
Отрегулируйте высоту нескольких строк, включая заголовок таблицы
.tablepress-id-4 thead th, .tablepress-id-4 .row-3 td, .tablepress-id-4 .row-5 td, .tablepress-id-4 .row-7 td { padding-top: 20px; padding-bottom: 20px; }
Вы можете добавить больше строк, следуя шаблону.
Отрегулируйте высоту строк, исключая заголовок таблицы
.tablepress-id-4 tbody td { padding-top: 20px; padding-bottom: 20px; }
Все строки конкретной таблицы будут изменены приведённым выше кодом. Строка заголовка не будет затронута.
Отрегулируйте высоту конкретных строк, исключая заголовок таблицы
.tablepress-id-4 .row-3 td { padding-top: 20px; padding-bottom: 20; }
Отрегулируйте высоту нескольких строк, исключая заголовок таблицы.
.tablepress-id-4 .row-2 td, .tablepress-id-4 .row-4 td, .tablepress-id-4 .row-6 td { padding-top: 20px; padding-bottom: 20px; }
Не забудьте изменить .tablepress-id на ваш фактический .tablepress-id.
Как настроить ширину столбцов в TablePress?
Ширину столбца можно изменить, определив ширину в пикселях или процентах и уменьшив количество дополнительных отступов.
Давайте рассмотрим коды.
Отрегулируйте определенную ширину столбца (определяющую пиксели)
.tablepress-id-4 .column-2 { width: 100px; }
Отрегулируйте определенную ширину столбца (определяющую процент)
.tablepress-id-4 .column-2 { width: 20%; }
Процентное значение относится к проценту от общего количества столбцов по ширине, где пиксель — это точная мера столбца.
Отрегулируйте ширину нескольких столбцов (определяя пиксели)
.tablepress-id-4 .column-2, .tablepress-id-4 .column-4, .tablepress-id-4 .column-6 { width: 100px; }
Вы можете добавить больше столбцов в этот код, следуя шаблону. Ширину можно изменить с пикселей на процент, в соответствии с вашими требованиями.
Тобиас Батге, разработчик TablePress, упоминает примечание, касающееся ширины столбца:
В большинстве случаев нет необходимости устанавливать ширину столбцов напрямую! Вместо этого вы можете захотеть уменьшить заполнение (пробел между текстом в ячейке и краями ячейки) с помощью CSS-кода.
.tablepress-id-N .column-2 { padding: 4px; }
Он также упоминает, что:
«Пожалуйста, имейте в виду, что не всегда будет возможно уменьшить ширину столбца таблицы, поскольку по умолчанию минимальное значение ширины этого столбца определяется самым длинным отдельным словом или другим содержимым в столбце».
Страницы в тему: