Necesité hacer una tabla HTML que se viera así:
Para esto, usé CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Table with inset shadow and round corners</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
table.tabla {
width: 500px;
margin: 0 auto; /* centrado */
background: white;
/* sombra interior */
/* Ver http://css-tricks.com/snippets/css/css-box-shadow/ */
box-shadow: inset 1px 1px 1px 0px #999999;
/* esquinas redondeadas */
/* Ver http://border-radius.com/ */
border-radius: 10px;
}
table.tabla > tbody > tr:first-child > td:first-child { /* celda superior izquierda */
border-top-left-radius: 10px;
}
table.tabla > tbody > tr > td:first-child { /* celdas de la primera columna */
border-left: 1px solid #999999;
}
table.tabla > tbody > tr:last-child > td:first-child { /* celda inferior izquierda */
border-bottom-left-radius: 10px;
}
table.tabla > tbody > tr:last-child > td:last-child { /* celda inferior derecha */
border-bottom-right-radius: 10px;
}
table.tabla > tbody > tr:nth-child(even) { /* celdas de los renglones pares */
background: #e7e7e7;
}
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 class="tabla">
<tr>
<td>abc</td>
<td><table><tr><td>123</td><td>456</td></tr><tr><td>123</td><td>456</td></tr></table></td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td><table><tr><td>123</td><td>456</td></tr><tr><td>123</td><td>456</td></tr></table></td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td><table><tr><td>123</td><td>456</td></tr></table></td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td><table><tr><td>123</td><td>456</td></tr></table></td>
<td>ghi</td>
</tr>
<tr>
<td>abc</td>
<td><table><tr><td>123</td><td>456</td></tr></table></td>
<td>ghi</td>
</tr>
</table>
</body>
He aquí este código ejecutándose en el navegador:
| abc | | ghi |
| abc | | ghi |
| abc | | ghi |
| abc | | ghi |
| abc | | ghi |
No hay comentarios.:
Publicar un comentario