Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/06/2008, 15:49
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 11 años, 1 mes
Puntos: 20
Confundido conceptos css

Tengo un problema de conceptos de css, al parecer no sé aun como funciona esto.

Intento aplicarle estilo a una tabla y claro... si no pongo ninguna etiqueta id ni class me lo aplica a todas las tablas.

Entonces... esto lo solucionaba creando una capa que envuelve toda la tabla y poniendo la etiqueta "id" delante...

Pero no logro hacerlo...

Esta es la que tengo por defecto:

Código:
table,td
{
	border               : 1px solid #CCC;
	border-collapse      : collapse;
  font                 : small/1.4 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
table
{
	border                :none;
	border                :1px solid #CCC;
}
thead th,
tbody th
{
/*background            : #FFF url(../imagenes/tablas/th_bck.gif) repeat-x;*/
background            : #fafafb;
  color                 : #666;  
	padding               : 5px 10px;
  border-left           : 1px solid #CCC;
  font-weight:bold;
  text-align:center;
  font-size:11px;
  vertical-align: middle;
}
tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
  
}
tbody tr td
{
	padding               : 5px 10px;
  color                 : #666;
  cursor:pointer;
  font-size:11px;
  text-align:center;
}
tbody tr:hover
{
  /*background            : #FFF url(../imagenes/tablas/tr_bck2.gif) repeat;*/
  background:#F0F7FC;
  
}

tbody tr:hover td
{
  color                 : #454545;
  /*border            : 1px solid #454545;*/
}
tfoot td,
tfoot th
{
  border-left           : none;
  border-top            : 1px solid #CCC;
	padding               : 4px;
  background            : #FFF url(../imagenes/tablas/foot_bck.gif) repeat;
  color                 : #666;
}
caption
{
	text-align            : left;
	font-size             : 100%;
	padding               : 30px 0 10px 0px;
	color                 : #666;
	font-weight: bold;
	width:500px;
}
table a:link
{
	color                 : #666;
}
table a:visited
{
	color                 : #666;
}
table a:hover
{
	color                 : #003366;
	text-decoration       : none;
}
table a:active
{
	color                 : #003366;
}
Entonces quiero que solo se aplique cuando este dentro de una capa contenedora que se llame por ejemplo "mitabla".

Lo he intentado así... pero no funciona

Código:
#mitable table,td
{
	border               : 1px solid #CCC;
	border-collapse      : collapse;
  font                 : small/1.4 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
#mitable table
{
	border                :none;
	border                :1px solid #CCC;
}
#mitable thead th,
#mitable tbody th
{
/*background            : #FFF url(../imagenes/tablas/th_bck.gif) repeat-x;*/
background            : #fafafb;
  color                 : #666;  
	padding               : 5px 10px;
  border-left           : 1px solid #CCC;
  font-weight:bold;
  text-align:center;
  font-size:11px;
  vertical-align: middle;
}
#mitable tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
  
}
#mitable tbody tr td
{
	padding               : 5px 10px;
  color                 : #666;
  cursor:pointer;
  font-size:11px;
  text-align:center;
}
#mitable tbody tr:hover
{
  /*background            : #FFF url(../imagenes/tablas/tr_bck2.gif) repeat;*/
  background:#F0F7FC;
  
}

#mitable tbody tr:hover td
{
  color                 : #454545;
  /*border            : 1px solid #454545;*/
}
#mitable tfoot td,
#mitable tfoot th
{
  border-left           : none;
  border-top            : 1px solid #CCC;
	padding               : 4px;
  background            : #FFF url(../imagenes/tablas/foot_bck.gif) repeat;
  color                 : #666;
}
#mitable caption
{
	text-align            : left;
	font-size             : 100%;
	padding               : 30px 0 10px 0px;
	color                 : #666;
	font-weight: bold;
	width:500px;
}
#mitable table a:link
{
	color                 : #666;
}
#mitable table a:visited
{
	color                 : #666;
}
#mitable table a:hover
{
	color                 : #003366;
	text-decoration       : none;
}
#mitable table a:active
{
	color                 : #003366;
}
Es correcto?

Gracias