Buenas
Tengo que mostrar datos tabulares y que mejor forma que hacerlo mediante una tabla formateada con CSS ;)
Tengo 2 problemas
Uno es que no sé centrar verticalmente los datos
Hay alguna manera de hacerlo con CSS, o tengo que emplear valign="middle" en el codigo html?
Y el otro es todas mis celdas ocupan lo que ocupe su titulo de encabezado. Y claro tengo un campo descripción que me ocupa varias lineas y me gustaria que fuese mas largo que el resto.
Como véis mas abajo utilizo un parche cutre de "espacio duro".
CÓDIGO HTML Código HTML:
<table id="mytable" cellspacing="0" summary="Cuotas mas altas">
<caption>Tabla 2 - Cuotas más altas</caption>
<tr>
<th scope="col" abbr="Dual 1.8">Fecha evento</th>
<th scope="col" abbr="Dual 1.8">Fecha aceptada</th>
<th scope="col" abbr="Dual 1.8">Tipo</th>
<th scope="col" abbr="Dual 1.8">Descripción </th>
<th scope="col" abbr="Dual 1.8">Cuota</th>
<th scope="col" abbr="Dual 1.8">Riesgo</th>
<th scope="col" abbr="Dual 1.8">Para ganar</th>
</tr>
<tr>
<td>10:15am 17-Jan-08</td>
<td>17-Jan-08</td>
<td>Basketball Total</td>
<td class="ancho">Panathinaikos (GRE)/Chorale Roanne (FRA) (O 165.5) for Game</td>
<td>1.980</td>
<td>5.00</td>
<td>4.98</td>
</tr>
</table>
CSS Código HTML:
#mytable {
width: 230px;
padding: 0;
margin: 0;
margin-bottom:20px;
text-align:center;
}
caption {
padding: 0 0 5px 0;
width: 230px;
font: italic 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align:center;
padding: 4px 6px 4px 12px;
background: #CAE8EA url(../imagenes/bg_header_table.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 3px 6px 3px 12px;
color: #4f6b72;
font-size:9px;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 9px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
Cómo puedo darle un tamaño a cada celda? lo he intentado con width pero sin éxito
Gracias de antemano