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