Как настроить высоту и ширину в TablePress?

как изменить ширину и высоту в tablepress
В TablePress нет встроенной панели редактора для настройки высоты и ширины столбца или строки, но мы можем сделать это с помощью CSS-кода. Как настроить высоту и ширину в TablePress?

    Содержание

  1. Как настроить высоту строк в TablePress?
  2. Как настроить ширину столбцов в 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;
}

Он также упоминает, что:

«Пожалуйста, имейте в виду, что не всегда будет возможно уменьшить ширину столбца таблицы, поскольку по умолчанию минимальное значение ширины этого столбца определяется самым длинным отдельным словом или другим содержимым в столбце».

Страницы в тему:

Добавить комментарий