Foros del Web » Creando para Internet » CSS »

Tablas + CSS

Estas en el tema de Tablas + CSS en el foro de CSS en Foros del Web. hola gente, como les va? Estoy haciendo pruebas con tablas y CSS y he quedado asombrado de lo que se puede hacer. Estoy teniendo problemas ...
  #1 (permalink)  
Antiguo 12/09/2007, 09:50
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 9 meses
Puntos: 177
Tablas + CSS

hola gente, como les va?

Estoy haciendo pruebas con tablas y CSS y he quedado asombrado de lo que se puede hacer.

Estoy teniendo problemas con el ancho fijo de las columnas, en FF anda perfecto, en IEx no me toma los anchos. les dejo el código:

Código HTML:
table{
  width: 80%;
}
table, th, td {
	border: 1px solid #D4E0EE;
	border-collapse: collapse;
	font-family: "Trebuchet MS", Arial, sans-serif;
	color: #555;
}

caption {
	font-size: 150%;
	font-weight: bold;
	margin: 5px;
}

td, th {
	padding: 4px;
}
th.fecha{
   width: 60px;
}
th.dni{
  width: 50px;
}
thead th {
	text-align: center;
	background: #E6EDF5;
	color: #4F76A3;
	font-size: 100% !important;
}
tbody th {
	font-weight: bold;
}

tbody tr { background: #FCFDFE; }

tbody tr.odd { background: #F7F9FC; }

table a:link {
	color: #718ABE;
	text-decoration: none;
}

table a:visited {
	color: #718ABE;
	text-decoration: none;
}

table a:hover {
	color: #ff5900;
	text-decoration: underline !important;
}

tfoot th, tfoot td {
	font-size: 85%;
}
y el HTML:

Código HTML:
<table summary="Tabla de ejemplo">
	<caption>Tablas con CSS</caption>
	<thead>
		<tr>
			<th>Datos %</th>
			<th class="fecha">Fecha</th>
			<th class="dni">D.N.I.</th>
			<th>Datos %</th>
			<th>Datos %</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Dato 11</th>
			<td>05/06/07</td>
			<td>24.353.185</td>
			<td>Dato 14</td>
			<td><a href="#">Dato 15</a></td>
		</tr>
		<tr class="odd">
			<th>Dato 21</th>
			<td>05/06/06</td>
			<td>24.353.185</td>
			<td>Dato 24</td>
			<td><a href="#">Dato 25</a></td>
		</tr>
		<tr>
			<th>Dato 31</th>
			<td>05/06/05</td>
			<td>24.353.185</td>
			<td>Dato 34</td>
			<td><a href="#">Dato 35</a></td>
		</tr>
		<tr class="odd">
			<th>Dato 41</th>
			<td>05/06/04</td>
			<td>24.353.185</td>
			<td>Dato 44</td>
			<td><a href="#">Dato 45</a></td>			
		</tr>
	</tbody>
</table> 
Gracias de antemano!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #2 (permalink)  
Antiguo 13/09/2007, 14:10
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años
Puntos: 2114
Re: Tablas + CSS

Hola DragonX
Antes que nada, convengamos y pongámonos de acuerdo sobre el Doctype del documento.
Para mis pruebas he utilizado:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
Ahora bien, en mis prácticas no suelo utilizar la declaración del width sobre una class en el th, sino en el primer td.
Por lo que el CSS sería:
Código HTML:
td.fecha{
   width: 60px;
}
td.dni{
  width: 50px;
}
en lugar de:
Código HTML:
th.fecha{
   width: 60px;
}
th.dni{
  width: 50px;
}
y EL html sería:
Código HTML:
 <td class="fecha">05/06/07</td>
            <td class="dni">24.353.185</td> 
en lugar de:
Código HTML:
 <th class="fecha">Fecha</th>
            <th class="dni">D.N.I.</th> 
Finalmente, la medida real es padding+width+padding=68px
Siempre y cuando declare el tamaño de la fuente en px, porque sin declararlo toma el browser default.
Para mi ejemplo agregué:
Código HTML:
table, th, td {
    font-size: 14px;
}
Sirve esto?
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
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




La zona horaria es GMT -6. Ahora son las 21:03.