Foros del web, para los que viven de bits

DragonX · 12-sep-2007, 09:50

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!

Daniel Ulczyk · 13-sep-2007, 14:10

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?

13-sep-2007, 14:10	#2 (permalink)
Daniel Ulczyk Colaborador Fecha de Ingreso: febrero-2005 Ubicación: Buenos Aires Mensajes: 1.146	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? __________________ Utilidades para Webmasters Diseño Web

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado