image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

tabla con efecto sombra

Volver al foro | Responder | Añadir nuevo tema


De: laura
Fecha: 19/09/2006
Mensaje:

Hola alguien conoce una forma de hacer que la tabla tenga efecto sombra?


Quizás le interese
De: jbosch(vosk)
Util para: 5 personas

Fecha: 22/09/2006
Mensaje:

que yo sepa no existe ningun atributo css para dar sombra a las tablas, pero siempre puedes recurrir a html+javascript+css para crear efectos como este. un ejemplo:

<html><head><style>
.sb {position:absolute;visibility:hidden;top:0;left:0;
z-index:0;width:0;height:0;background-color:#000000;};
</style></head><body>
<table id="t" border="1">
<tr><td>Tabla con sombra</td><td>Tabla con sombra</td></tr>
<tr><td>Tabla con sombra</td><td>Tabla con sombra</td></tr>
<tr><td>Tabla con sombra</td><td>Tabla con sombra</td></tr>
</table>
<div class="sb" id="s1"></div>
<div class="sb" id="s2"></div>
<script>
var t=document.getElementById('t');
var s1=document.getElementById('s1').style;
var s2=document.getElementById('s2').style;
var x=t.offsetLeft;
var y=t.offsetTop;
var m=t.offsetWidth;
var l=t.offsetHeight;
s1.top=y+5;
s1.left=x+m;
s1.width=5;
s1.height=l;
s1.backgroundColor="#C0C0C0";
s1.visibility="visible";
s2.top=y+l;
s2.left=x+5;
s2.width=m;
s2.height=5;
s2.backgroundColor="#C0C0C0";
s2.visibility="visible";
</script></body></html>

ya ves que es lo mas evidente que puedas imaginar: añadir un par de divs de color que quieras que simulen la sombra lateral e inferior. está muy poco optimizado y es muy estático, pero para el ejemplo ya nos vale. la tabla es una simple tabla (pero puedes cambiarla por una de posicion absoluta y verás como sigue funcionando). luego hay un par de divs que serán las sombras (observa que en el css de clase indico que estén ocultos mientras se crea la tabla). luego está el script que adapta las sombras a los margenes de la tabla: ojo, para que funcione bien primero se ha de crear la tabla completa, de lo contrario trabajaría con valores incorrectos. los valores son la posicion (x,y) y el tamaño (m,l); con estos situo las sombras en los margenes, les cambio el color y finalmente las muestro. puedes adaptar el script para que sea una funcion que trabaje con una tabla determinada y le adapte las sombras (útil cuando cambian los datos de la tabla). funciona en nsn7 y msie6 (no del todo bien en este último porqué no hace caso de la altura de la sombra inferior).

jbosch(vosk)





Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:05 de Agosto de 2012. Spain - España.
© 1998-2004 por . Todos los derechos reservados.