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=""><<</a></li>
<li class="actual"><a href=""><</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="">></a></li>
<li class="actual"><a href="">>></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.