Foros del Web » Creando para Internet » CSS »

Confundido conceptos css

Estas en el tema de Confundido conceptos css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/06/2008, 15:49
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
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
  #2 (permalink)  
Antiguo 17/06/2008, 16:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Confundido conceptos css

Debería ser correcto, aunque no muestras el html al que se lo has aplicado para ver si está bien o no.

No obstante, es más sencillo ponerle un id o una clase a la propia tabla. De esa manera podrías poner:

<table id="tablauno"><tr...

y en la css

#tablauno {...
#tablauno td {...

etcétera.


Por otro lado, estás usando algunas cosas un tanto contradictorias:

table
{
border :none;
border :1px solid #CCC;
}

¿none o 1px? quieres que tenga borde, o no?

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:04.