Lo que yo te decia era algo asi. Me he apoyado en un script de las faq.
Esta muy comentado:
Código PHP:
<html>
<head>
<style>
body {
background-color:red;
}
table {
border-collapse:collapse;
background-color:white;
}
</style>
</head>
<body>
<div>
<table border="1" width="50%">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
<br/><br/>
<div>
<table border="1" width="75%">
<tbody>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
</tbody>
</table>
</div>
<script>
/*
Codigo de caricatos. FAQ CSS #203
"¿Como obtengo los colores intermedios de 2 dados en n pasos?"
http://www.forosdelweb.com/showpost.php?p=903567&postcount=203
*/
var hexa = "0123456789abcdef";
function decahex(n) {
return hexa.charAt(n / 16) + hexa.charAt(n % 16);
}
function hexadec(x) {
x = x.toLowerCase();
return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1)))
}
function colorHexa(c) {
return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]);
}
function transitar(ini, fin, pasos) {
var dato = desglose(ini);
var rIni = dato[0];
var gIni = dato[1];
var bIni = dato[2];
var intermedios = new Array(pasos);
intermedios[0] = dato;
var dato = desglose(fin);
intermedios[pasos - 1] = dato;
var rFin = dato[0];
var gFin = dato[1];
var bFin = dato[2];
var rMed = (rFin - rIni) / (pasos - 1);
var gMed = (gFin - gIni) / (pasos - 1);
var bMed = (bFin - bIni) / (pasos - 1);
for (var i = 1; i < pasos - 1; i ++){
var rgb = new Array(3);
rgb[0] = parseInt(rIni + (rMed * i));
rgb[1] = parseInt(gIni + (gMed * i));
rgb[2] = parseInt(bIni + (bMed * i));
intermedios[i] = rgb;
}
for (i = 0; i < intermedios.length; i ++)
intermedios[i] = colorHexa(intermedios[i]);
return intermedios;
}
function desglose(color) {
if (color.length != 6)
return "problema";
else{
devolver = new Array(3);
devolver[0] = hexadec(color.substr(0, 2));
devolver[1] = hexadec(color.substr(2, 2));
devolver[2] = hexadec(color.substr(4, 2));
}
return devolver;
}
//-------------
// Parte mia
var tablas=document.getElementsByTagName("TABLE");
//la separacion que tendrá la tabla con su sombra
var sep=5;
//los pasos que tendra el degradado. A mayor cantidad, mas grande la sombra, y mas suavizada.
var pasos=10;
//por cada tabla que encontremos
for(var a=0; a<tablas.length; a++) {
//dimensiones de la tabla actual
var tablaW=tablas[a].offsetWidth;
var tablaH=tablas[a].offsetHeight;
//la capa div que contiene a la tabla
var capaAnterior=tablas[a].parentNode;
//con estas dos lineas nos aseguramos que la capa no crecerá al añadirle nuevos elementos
capaAnterior.style.height=(tablaH+sep+pasos+2)+"px";
capaAnterior.style.overflow="hidden";
//obtenemos el array con los colores que nos serviran para degradar la sombra
var colores=transitar("000000","ff0000",pasos);
//colocamos cada una de las capas que haran el degradado de la sombra
for(b=1; b<=pasos; b++) {
//creamos la capa mediante DOM
var capa=document.createElement("DIV");
//la colocamos en su lugar pertinente
capa.style.position="relative";
capa.style.top=(sep-tablaH*b+b)+"px";
capa.style.left=(sep+b)+"px";
//le aplicamos el color de fondo
capa.style.backgroundColor=colores[b-1];
//las dimensiones correctas
capa.style.width=tablaW+"px";
capa.style.height=tablaH+"px";
//hacemos que cada nueva capa quede detras de la anterior
capa.style.zIndex=-b;
//y listo, la metemos en capaAnterior
capaAnterior.appendChild(capa);
}
}
</script>
</body>
</html>
s2!