Pregunta sobre TablePress de Wordpress:

Tabla ampliada al ancho de página completo

Un usuario preguntó 👇

¡Hola Tobias!

En primer lugar, ¡gracias por el gran plugin! Es una locura que te ofrezcan un plugin avanzado con excelente soporte, todo gratis. No mucho, pero hice una pequeña donación como agradecimiento.

Estaba jugando con la extensión TablePress + DataTables Button y encontré que casi todo funcionaba como quería al eliminar fragmentos de código de los materiales de respaldo antiguos, pero esta vez estoy perplejo.

La tabla en la página que vinculé en el formulario de soporte no se extiende a 720 px para llenar toda la página del escritorio. Quiero que haga eso, como lo hace aquí:

https://www.howtogames.nl/guides/animal-crossing-new-horizons-acnh/encyclopedie/alle-insecten-lijst/

No estoy seguro de qué hice bien para estirarlo en esa página, o qué estoy haciendo mal en la nueva página. Estoy usando el siguiente CSS en las Opciones de plugin (probablemente muy predecible ya que reciclé una gran cantidad de código que encontré y no soy un experto en CSS):

.tablepress-id-1 tbody td,
.tablepress-id-2 tbody td {
	font-size: 10px;
	vertical-align: middle;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: #3b8e50;
	font-weight: bold;
	font-size: 10px;
	color: #ffffff;
}

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #e89a00;
	color: #ffffff;
}

.tablepress .column-1,
.tablepress .column-2,
.tablepress .column-4,
.tablepress .column-5,
.tablepress .column-6,
.tablepress .column-7,
.tablepress .column-8,
.tablepress .column-9,
.tablepress .column-10,
.tablepress .column-11,
.tablepress .column-12,
.tablepress .column-13,
.tablepress .column-14,
.tablepress .column-15,
.tablepress .column-16,
.tablepress .column-17,
.tablepress .column-18,
.tablepress .column-19 {
	text-align: center;
}

.tablepress-id-1 .column-2,
.tablepress-id-2 .column-2 {
	font-weight: bold;
}

a.dt-button,
button.dt-button,
div.dt-button {
	background-image: none;
	background-color: #3b8e50;
	color: #ffffff;
}

a.dt-button:hover,
button.dt-button:hover,
div.dt-button:hover {
	background-image: none !important;
	background-color: #e89a00 !important;
	color: #ffffff;
}

div.dt-button-collection button.dt-button.active:not(.disabled) {
	background-image: none !important;
	background-color: #e89a00 !important;
	color: #ffffff;
}

@media screen and (min-width: 800px) {

	.dataTables_wrapper,
	.dataTables {
		width: 720px !important;
		margin: 0 auto 1em;
	}

}

.tablepress-id-1 .column-1,
.tablepress-id-2 .column-1 img {
	max-width: 50px;
	height: auto;
}

.dt-buttons {
	float: left !important;
	width: 30%;
}

.dataTables_filter {
	float: right;
	width: 30%;
	padding-right: 10px;
}

¿Tienes idea de cómo podría configurar el ancho de la mesa? Entiendo que la tabla cambiará automáticamente cuando agregue / oculte columnas con los botones y eso está bien, por supuesto.

Además, creo que una vez pregunté si había alguna forma de mostrar el botón y el cuadro de búsqueda en una línea, y la respuesta en ese momento fue que no era posible. ¿Quizás se le ocurran nuevas ideas? Casi lo encontré funcionando con float: left y floating: right pero no perfecto.

¡Gracias de antemano por cualquier información / ayuda!

(@tobiasbg)

Hace 10 meses

Hola,

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

No se preocupe, realmente no está haciendo nada malo aquí. Es posible que solo necesitemos un cambio. ¿Puedes reemplazar, por favor?

.dataTables_wrapper,
.dataTables {
	width: 720px !important;
	margin: 0 auto 1em;
}

le

.dataTables_wrapper,
.tablepress {
	width: 100% !important;
	margin: 0 auto 1em;
}

Debería resolver ese problema de ancho.

En cuanto a la ubicación del botón, puedes probar una extensión

.dt-buttons {
	float: left !important;
	width: 30%;
}

le

padding-top: 20px;

Saludos, Tobias

(@kubuskwal)

Hace 10 meses

¡Eso funcionó perfectamente! ¡Muchas gracias!

La ubicación del botón parece haberse perdido desde un punto de vista móvil, pero veré si puedo jugar con algunas preguntas adicionales de los medios :).

¡Gracias de nuevo!

(@tobiasbg)

Hace 10 meses

Hola,

¡Es bueno escuchar que esto ayudó!

Este CSS puede causar una ubicación diferente en los teléfonos móviles en el archivo CSS de los botones:

@media screen and (max-width: 640px) {
  div.dt-buttons {
    float: none !important;
    text-align: center;
  }
}

Puede intentar superarlo en su «CSS personalizado» con

@media screen and (max-width: 640px) {
  .dataTables_wrapper div.dt-buttons {
    float: left !important;
    text-align: left;
  }
}

Saludos, Tobias

(@kubuskwal)

Hace 10 meses

¡Woah, nunca se me ocurriría esa solución! Como era de esperar, funciona a la perfección: D.

¡Gracias de nuevo por la ayuda adicional! 🙂

(@tobiasbg)

Hace 10 meses

Hola,

no hay problema, ¡de nada! 🙂 ¡Es bueno escuchar que esto ayudó!

Todo lo mejor, Tobias

PD: En caso de que no lo tenga, 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. Los campos obligatorios están marcados con *