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!