Foros del Web » Creando para Internet » CSS »

Creando links para tablas paginadas

 Estas en el tema de Creando links para tablas paginadas en el foro de CSS en Foros del Web. Hola. Siguiendo con mis (cada vez creo que más...) penosos conocimientos de CSS, me gustaría haceros participar de mi actual problema en este campo: Estoy ...
  #1 (permalink)  
Antiguo 10/09/2009, 06:24
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 15 años, 3 meses
Puntos: 0
Creando links para tablas paginadas
Hola.

Siguiendo con mis (cada vez creo que más...) penosos conocimientos de CSS, me gustaría haceros participar de mi actual problema en este campo:

Estoy en este momento realizando un diseño para la paginación de los datos de una tabla.

Para ello, tengo en un div de contenido la tabla en cuestión. El div tiene un ancho del 100% (intocable), mientras que la tabla que está dentro de él no tiene un ancho definido, puesto que no tengo ni idea de la longitud de los datos que me pueden venir de BD. Normalmente, este tamaño es bastante más pequeño que el 100% del div contenedor de todo.

Mi problema surge cuando intento crear una lista de links donde se mete un enlace para cada página de la paginación (además de ir al primero, ir al último, siguiente y anterior).

Esta lista de links la he definido como un ul en horizontal con links en cada li.
Lo malo es que la tabla está dentro de un div que ocupa todo el ancho, mientras que la tabla no lo hace, por lo que no sé lo que mide y no tengo ni idea de cómo centrar el menú para que aparezca centrado bajo la tabla...

Mi código:

Código: 
<html>
	<head>
		<title>testeando 1</title>
		<link rel="stylesheet" type="text/css" href="css/micss.css" />
	</head>
	<body>
		<div id="contenido_tabla">
			<table class="skn-table_border">
				<caption />
				<thead>
					<tr>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="images/marca.gif" />Fecha 1</span>
						</th>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="images/marca.gif" />Fecha 2</span>
						</th>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="/images/marca.gif" />Fecha 3</span>
						</th>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="images/marca.gif" />Concepto</span>
						</th>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="images/marca.gif" />Identificador</span>
						</th>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="images/marca.gif" />Importe</span>
						</th>
						<th class="skn-table_header nobreak">
							<span>
								<img style="border: 0pt none ; width: 4px; height: 8px;" src="images/marca.gif" />Importe total 1</span>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999			</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999			</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											XXXXXXXXXXXXXXX</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											57741</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											15.7</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											15.7</span>
						</td>
					</tr>
					<tr class="skn-even_row">
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999										</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											99/99/9999</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											99/99/9999</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>							XXXX	XXX	XXXX		XXXXXXXX</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											11765.89</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											11781.59</span>
						</td>
					</tr>
					<tr>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>				XXXXXXXXXXXXXX	XXXX	XXX	XXXX		XXXXXXXX</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											57741</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											15.7</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											11797.29</span>
						</td>
					</tr>
					<tr class="skn-even_row">
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>				XXXX	XXXX	XXX	XXXX	XXXXXXXX XXXX XXXXXXXXX XXXXXX</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
						<td class=" table_side_border nobreak  table_body">
							<span>99/99/9999											</span>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
		<div id="paginacion" class="paginacion" style="background-color: lightgreen;">
			<ul class="menu_paginacion">
				<li class="actual"><a href="">&lt&lt;</a></li>
				<li class="actual"><a href="">&lt</a></li>				
				<li class="actual">1</li>
				<li class="actual"><a href="">2</a></li>
				<li class="actual"><a href="">3</a></li>
				<li class="actual"><a href="">&gt;</a></li>
				<li class="actual"><a href="">&gt;&gt;</a></li>					
			</ul>
		</div>
	</body>
</html>
mi css: micss.css

Código: 
/* Reseteando los estilos para todos los navegadores y todos los elementos */
* {
	outline: 0;
    font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
    font-size: 10px;
    color: #000;
	text-decoration: none;
}

body	{
   background-color:#FFF;
}


/* Reglas predefinidas para los caption de las tablas */
caption {
	padding: 5px;
	text-align:left; 
	font-weight: bold;
}


/* Styles for links */
A {
    color: #000000;
    text-decoration: none;
	font-weight:bold;
}

A:visited {
    color: #000000;
    text-decoration: none;
	font-weight:bold;
}

A:active, A:hover {
    color: #CC33DD;
	text-decoration: none;
	font-weight:bold;
}

.skn-table_border {
    border: 1px solid #A6B0F8;
	border-collapse: collapse;
}

.skn-table_header {
	padding: 3px 5px; 
	background-color: #A6B0F8;
    border: 1px solid #A6B0F8;
	border-collapse: collapse; 
	text-align: left;
	vertical-align: middle;
}


.table_body {
	vertical-align: middle;
	padding: 3px 10px;
}


.skn-even_row {
    background-color: #E0E0E1;
}

.nobreak {
	white-space: nowrap;
}


td.table_side_border {
	border-left: 1px solid #A6B0F8;
	border-right: 1px solid #A6B0F8;
}


th span, td span{
	vertical-align: middle;
}

span img {
	margin-right: 5px;
	border: 0 none;
}

/* Estos son los estilos aplicados a los menús de paginación de datos para las tablas*/

div.paginacion {
	padding: 10px;
}

div.paginacion ul.menu_paginacion {
	font-size: 10px;
}

div.paginacion ul.menu_paginacion li {
	float: left; 
	list-style-type: none;
	padding: 0 10px;
}

div.paginacion ul.menu_paginacion li.actual {
	color: red;
	font-weight: bolder;
	font-size: 12px;				
}

div.paginacion ul.menu_paginacion li a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}
Lo que quiero es que el contenido del div que tiene el background verde quede centrado bajo la tabla de datos... Considerando que la tabla se hace más o menos ancha dependiendo del texto que haya en la columna 'concepto'.

Espero haberme explicado correctamente.

Muchísimas gracias a todos.


Un saludo.


PD: Cualquier sugerencia de cambios de estilo, tips & tricks que querais proponerme para esta página serán bienvenidos. Muchas gracias.
  #2 (permalink)  
Antiguo 10/09/2009, 16:32
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 6 meses
Puntos: 45
Respuesta: Creando links para tablas paginadas
Hola tistklehoff

Puedes intentar con esto.

Tabla siempre centrada, sin tamaño definido:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla sin tamaño definido siempre centrada</title>
<style type="text/css">
* {
	outline: 0;
    font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
    font-size: 10px;
    color: #000;
	text-decoration: none;
}

.tabla {
	border-collapse: collapse;
	border: 1px solid #A6B0F8;
	margin: 0 auto;
}

.celda {
	border: 1px solid #A6B0F8;
}

div.paginacion {
	padding: 0;
	background-color: #A6FFE2;
	height: 30px;
	line-height: 30px;
}

div.paginacion ul.menu_paginacion {
	font-size: 10px;
}

div.paginacion ul.menu_paginacion li {
	float: left; 
	list-style-type: none;
	padding: 0 10px;
}

div.paginacion ul.menu_paginacion li.actual {
	color: red;
	font-weight: bolder;
	font-size: 12px;				
}

div.paginacion ul.menu_paginacion li a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}
.centrado {
	text-align: center
}
</style>
</head>

<body>
<p class="centrado">Tabla sin tamaño definido siempre centrada (tamaño que se adapta a su contenido).</p>
<p class="centrado">Testado en iexplorer 7, firefox 3.5, opera 9 y safari 4</p>
<table class="tabla">
	<tr>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">Datos datos datos</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">Datos datos datos datos</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
</table>
		<div id="paginacion" class="paginacion">
			<ul class="menu_paginacion">
				<li class="actual"><a href="">&lt&lt;</a></li>
				<li class="actual"><a href="">&lt</a></li>				
				<li class="actual">1</li>
				<li class="actual"><a href="">2</a></li>
				<li class="actual"><a href="">3</a></li>
				<li class="actual"><a href="">&gt;</a></li>
				<li class="actual"><a href="">&gt;&gt;</a></li>					
			</ul>
		</div>

</body>

</html>
Esto es un prototipo genérico, con parte de tu estilo, pero que debes adaptar a tu diseño. Comenta algo.

Bye
Última edición por deirdre; 10/09/2009 a las 19:34 Razón: Ajustes
  #3 (permalink)  
Antiguo 10/09/2009, 20:25
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 6 meses
Puntos: 45
Respuesta: Creando links para tablas paginadas
Hola...

Mira esto otro, creo que se ajusta bastante a lo que necesitas:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla sin tamaño definido siempre centrada y menu siempre centrado</title>
<style type="text/css">
* {
        outline: 0;
        font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
        font-size: 10px;
        color: #000;
	text-decoration: none;
}

.tabla {
	border-collapse: collapse;
	border: 1px solid #A6B0F8;
	margin: 0 auto;
}

.celda {
	border: 1px solid #A6B0F8;
}

div.paginacion {
	padding: 0;
	background-color: #A6FFE2;
	height: 30px;
	line-height: 30px;
}

div.paginacion .menu_paginacion {
	float: left;
	list-style-type: none;
	padding: 0 10px;
	font-size: 10px;
}

div.paginacion .actual {
	color: red;
	font-weight: bolder;
	font-size: 12px;				
}

div.paginacion .menu_paginacion a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}
.centrado {
	text-align: center
}
.sep {
	padding-left: 5px;
	padding-right: 5px;
}
</style>
</head>

<body>
<p class="centrado">Tabla sin tamaño definido siempre centrada (tamaño que se adapta a su contenido).</p>
<p class="centrado">Testado en iexplorer 7, firefox 3.5, opera 9 y safari 4</p>
<p class="centrado">Menu de navegación centrado en la última fila.</p>
<p class="centrado">Independientemente del ancho que ocupe la tabla (según los datos que lleve), siempre queda centrada y el menú también.</p>

<table class="tabla">
	<tr>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">Datos datos datos</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">Datos datos datos datos</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="5" class="centrado">
		<div id="paginacion" class="paginacion">
		<span class="actual sep"><a href="">&lt&lt;</a></span>
		<span class="actual sep"><a href="">&lt</a></span>
		<span class="actual sep">1</span>
		<span class="actual sep"><a href="">2</a></span>
		<span class="actual sep"><a href="">3</a></span>
		<span class="actual sep"><a href="">&gt;</a></span>
		<span class="actual sep"><a href="">&gt;&gt;</a></span>
		</div>
		</td>
	</tr>
</table>

</body>

</html>
Hazte un copia-pega y lo pruebas.

Bye
  #4 (permalink)  
Antiguo 11/09/2009, 01:26
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Creando links para tablas paginadas
Hola.

Gracias a los dos por las rapidísimas respuestas.

La primera opción no me vale, porque centra también la tabla y ésta debe permanecer al lado izquierdo.

En cuanto a la segunda, no quería meter el div de paginación dentro de la tabla porque el jsp que genera la página tiene un método genérico que crea los <tr> y los <td>, de acuerdo a la composición de los datos mostrados. Por lo tanto, no tengo forma de saber cuántas columnas habrá en la tabla y no quería enviar el dato del número de columnas máximo para el parámetro colspan.

¿No hay alguna forma de ajustar el tamaño de ancho del div que contiene a la tabla? ¿Se le puede dar un ancho fijo y que se haga más grande si el contenido lo necesita? De esta forma, supongo que podría meter el div de paginación dentro y decirle que quiero centrarlo (supongo que con un text-align y creo que otro div, corregidme si me equivoco).

Si no hay otra forma, por favor, indicádmelo para proceder a las modificaciones oportunas para lo del colspan.


Muchas gracias a todos.

Un saludo.
  #5 (permalink)  
Antiguo 14/09/2009, 02:28
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Creando links para tablas paginadas
Hola chicos...

Al final, todo quedó como la segunda propuesta de deirdre: Metido dentro de una fila de la tabla.

Hemos tenido que cambiar algunas cosas, pero parece que todo ha ido bastante bien.

No obstante, si alguien encontrase otra solución, me gustaría que la compartiese con nosotros.


Muchas gracias a todos.


Un saludo.
  #6 (permalink)  
Antiguo 14/09/2009, 06:17
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 6 meses
Puntos: 45
Respuesta: Creando links para tablas paginadas
Hola tistklehoff

No te ofrecí una tercera propuesta porque no sabía cómo hacerla.

Me alegra que lo arreglaras utilizando la segunda solución.

Suerte.

Bye
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:00.