Pregunta sobre TablePress de Wordpress:

Cabezal de mesa vertical

Un usuario preguntó 👇

Hola,

No estoy seguro de cómo lograr una cosa:

Tengo una tabla con 17 columnas. el título de cada columna es un poco más largo aunque el contenido de cada celda es muy pequeño.

Me gusta esto:

Cabeza: Ancho del elemento Asunto: 29-31

así que quiero girar la cabeza 90 ° y poner las celdas para que quepan el poco material.

No sé cómo explicarlo bien … pero ¿hay una simple solemnidad?

El CSS gira y los títulos «rotan (270 grados)», pero el tamaño de la celda no se reduce …

(@tobiasbg)

Hace 1 año, 11 meses

Hola,

gracias por tu publicación y perdón por las molestias.

Los encabezados no se pueden rotar directamente, pero puede agregar un elemento HTML ( <span>) allí y gírelo. Para obtener más información al respecto, consulte estos enlaces: https://wordpress.org/support/topic/rotating-header-text/ https://wordpress.org/support/topic/rotating-and-vertically-align- texto -from-bun-go-barr / https://wordpress.org/support/topic/table-too-large-2/

Saludos, Tobias

(@awbwerbung)

Hace 1 año, 11 meses

Oye gracias 🙂

CASI llegué al trabajo. Ahora bien, esto suena como … algunas celdas en la primera fila están de alguna manera mal … pero no puedo entender por qué …

Tal vez podrías echar un vistazo rápido …

Aquí está ahora:

http://neu.druckereiservice.de/waschmittel/

Esta respuesta fue modificada hace 1 año, 11 meses por.

(@tobiasbg)

Hace 1 año, 11 meses

Hola,

podrías probar esta versión modificada:

.tablepress-id-11 thead tr {
	height: 150px;
}

.tablepress-id-11 thead th {
	vertical-align: middle;
}

.tablepress-id-11 thead th span {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	display: block;
	width: 60px !important;
	transform-origin: center center;
}

De lo contrario, realmente no sé qué hacer aquí, excepto tal vez desactivar la casilla de verificación «Usar tablas de datos» y usar la casilla en su lugar scroll Método de extensión TablePress de https://tablepress.org/extensions/responsive-tables/

Saludos, Tobias

(@awbwerbung)

Hace 1 año, 11 meses

Oye, gracias de nuevo.

Creo que lo hice … al menos para mis necesidades.

Pasos: poner el título en div AND span

me gusta:

<div><span>A very very long title</span></div>

La SEC ahora se ve así:

.tablepress-id-11 th {
/* Something you can count on */
	height: 200px; /* make this big enough to fit your titles */
	white-space: nowrap;
}

th > div {
	transform: /* Magic Numbers */
/* 45 is really 360 - 45 */
translate(25px,51px) rotate(315deg);
	width: 30px;
}

th > div > span {
	border-bottom: 1px solid #ccc;
	padding: 5px 10px;
}

.tablepress-id-11 td {
	text-align: center;
}

Encontré este código en otro sitio web, pero ahora se adapta a mis necesidades. Solo se gira de 90 ° a 45, lo cual está bien para mí.

Gracias Tobias por tu apoyo. ¡Es un plugin realmente genial, una vez que sepas cómo manejar todas las cosas! ¡gracias!

(@tobiasbg)

Hace 1 año, 11 meses

Hola,

no hay problema, ¡de nada! 🙂 ¡Es bueno escuchar que esto ayudó, y gracias por compartir su solución!

Todo lo mejor, Tobias

PD: Si no lo ha hecho, califique TablePress aquí en el directorio de plugins. ¡Gracias!

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.