Foros del Web » Creando para Internet » CSS »

crear clases para tablas diferentes

 Estas en el tema de crear clases para tablas diferentes en el foro de CSS en Foros del Web. hola a todos tengo mi archivo css en donde quiero declarar estilos para una tabla, pero estos estilos se aplican a todas las tablas que ...
  #1 (permalink)  
Antiguo 29/09/2015, 15:31
 
Fecha de Ingreso: septiembre-2015
Mensajes: 58
Antigüedad: 8 años, 7 meses
Puntos: 2
Exclamación crear clases para tablas diferentes
hola a todos

tengo mi archivo css en donde quiero declarar estilos para una tabla, pero estos estilos se aplican a todas las tablas que tengo en mi pagina, lo que quiero es que esos estilos se apliquen solo a una tabla y no a todas. por lo que he investigado, se debe crear una clase, y en el html indicarle class="nombre de la clase", pero no me funciona.
este es mi codigo css:

Código CSS: 
Ver original
  1. tabla1 table{ 
  2.            border:3px solid #1199cc;
  3.            background: #FFF;
  4.            border-top-left-radius:15px;
  5.            -moz-border-top-right-radius: 15px; 
  6.            -webkit-border-top-left-radius: 15px;
  7.            border-bottom-right-radius:15px;
  8.            -moz-border-bottom-right-radius: 15px; 
  9.            -webkit-border-bottom-right-radius:15px;    
  10.            }
  11.            .tabla1 table td{
  12.            border-top-left-radius:15px;
  13.            -moz-border-top-right-radius: 15px; 
  14.            -webkit-border-top-left-radius: 15px;
  15.            border-bottom-right-radius:15px;
  16.            -moz-border-bottom-right-radius: 15px; 
  17.            -webkit-border-bottom-right-radius:15px;
  18.            background: #cccccc;    
  19.            }
  20.            .tabla1 table textarea{
  21.            border:1px solid #1199cc;
  22.            border-top-left-radius:15px;
  23.            -moz-border-top-right-radius: 15px; 
  24.            -webkit-border-top-left-radius: 15px; 
  25.            border-bottom-right-radius:15px;
  26.            -moz-border-bottom-right-radius: 15px; 
  27.            -webkit-border-bottom-right-radius:15px; 
  28.            resize: none; 
  29.            }
  30.            .tabla1 table select {         
  31.            border-top-left-radius:15px;
  32.            -moz-border-top-right-radius: 15px; 
  33.            -webkit-border-top-left-radius: 15px;
  34.            border-bottom-right-radius:15px;
  35.            -moz-border-bottom-right-radius: 15px; 
  36.            -webkit-border-bottom-right-radius:15px;
  37.            background: #cccccc;   
  38.            }

no se si estoy declarando mal la clase o porque se me aplican dichos estilos para todo.

agradezco la ayuda.
  #2 (permalink)  
Antiguo 29/09/2015, 15:58
Avatar de michellqm  
Fecha de Ingreso: septiembre-2015
Mensajes: 21
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: crear clases para tablas diferentes
hola c:

Probablemente se te asigne a todas las tablas porque estas usando el selector de html "table"

lo cual engloba tooodas las tablas que tengas en tu documento, ahora bien, colocar el selector no es necesario, creo que esto funcionaria sin necesidad de colocar el table junto a la clase

¿Lo has probado así?

Saludos!
  #3 (permalink)  
Antiguo 29/09/2015, 20:47
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 5 meses
Puntos: 91
Respuesta: crear clases para tablas diferentes
amigo para seleccionar la clase de una tabla, seria asi ;)
Código CSS: 
Ver original
  1. table.clase_de_la_tabla {}
Código HTML: 
Ver original
  1. <table class="clase_de_la_tabla"></table>

Demo:
http://codepen.io/AngelKrak/pen/jbyyYe
  #4 (permalink)  
Antiguo 30/09/2015, 07:29
 
Fecha de Ingreso: septiembre-2015
Mensajes: 58
Antigüedad: 8 años, 7 meses
Puntos: 2
Respuesta: crear clases para tablas diferentes
saludos a todos.

ok muchachos gracias por la información, creee el archivo de la siguiente forma y ya parece funcionar jeje:
Código CSS: 
Ver original
  1. .tabla1 text {
  2.    background: #EAEAEC;
  3.    border: none;
  4.    font-size: 13px;
  5.    font-family: "arial";
  6.    height: 20px;
  7. }
  8. .tabla1 caja {
  9.    border:0.5px solid black;
  10.    height:25px;
  11.    overflow: hidden;
  12.    position:relative;
  13. }
  14. .tabla1 select {
  15.    background: #EAEAEC;
  16.    border: none;
  17.    font-size: 13px;
  18.    font-family: "arial";
  19.    height: 20px;
  20. }
  21.  
  22. .tabla1 button {
  23.  border: none;
  24.  background: #f2f2f2;
  25.  color: #3a7999;
  26.  padding: 4px 20px;
  27.  font-size: 12px;
  28.  border-radius: 5px;
  29.  position: relative;
  30.  box-sizing: border-box;
  31.  transition: all 500ms ease;
  32. }
  33. .tabla1 button:hover {
  34.  background: rgba(0,0,0,0);
  35.  color: #f2f2f2;
  36.  box-shadow: inset 0 0 0 3px #ADADB1;
  37. }
  38.  
  39. .buscar{
  40.     width: 45px; /*ancho por defecto*/
  41.    background-image: url('imagenes\lupa.jpg') no-repeat 9px center; /*icono lupa*/
  42.     padding: 9px 10px 9px 32px;
  43.     border-radius: 15em;
  44.     -webkit-transition: all .5s; /* transición de .5seg a todos los elementos para chrome*/
  45.     -moz-transition: all .5s; /* transición de .5seg a todos los elementos para mozilla*/
  46.     -o-transition: all .5s; /* transición de .5seg a todos los elementos para ophera*/
  47.     transition: all .5s; /* transición de .5seg a todos los elementos*/
  48.     outline: none; /* ocultar el fucos automático de los input */
  49. }
  50.  
  51. .tabla1 select:focus{ outline: none;}
  52.  
  53. .tabla1 caja::after{
  54.     content:"\025be";
  55.     background-color:#d9d9d9;
  56.     position:absolute;
  57.     top:0;
  58.     right:0px;  
  59. }
  60.  
  61.  
  62. .table{ 
  63.            border:3px solid #1199cc;
  64.            background: #FFF;
  65.            border-top-left-radius:15px;
  66.            -moz-border-top-right-radius: 15px; 
  67.            -webkit-border-top-left-radius: 15px;
  68.            border-bottom-right-radius:15px;
  69.            -moz-border-bottom-right-radius: 15px; 
  70.            -webkit-border-bottom-right-radius:15px;    
  71.            }
  72.            .table td{
  73.            background: #ffffff;    
  74.            }
  75.            .table th{
  76.            border-top-left-radius:15px;
  77.            -moz-border-top-right-radius: 15px; 
  78.            -webkit-border-top-left-radius: 15px;
  79.            border-bottom-right-radius:15px;
  80.            -moz-border-bottom-right-radius: 15px; 
  81.            -webkit-border-bottom-right-radius:15px;
  82.            background: #ffffff;    
  83.            }
  84.            .table textarea{
  85.            border-top-left-radius:15px;
  86.            -moz-border-top-right-radius: 15px; 
  87.            -webkit-border-top-left-radius: 15px; 
  88.            border-bottom-right-radius:15px;
  89.            -moz-border-bottom-right-radius: 15px; 
  90.            -webkit-border-bottom-right-radius:15px; 
  91.            background: #cccccc; 
  92.            resize: none; 
  93.            }
  94.            .table select {         
  95.            border-top-left-radius:15px;
  96.            -moz-border-top-right-radius: 15px; 
  97.            -webkit-border-top-left-radius: 15px;
  98.            border-bottom-right-radius:15px;
  99.            -moz-border-bottom-right-radius: 15px; 
  100.            -webkit-border-bottom-right-radius:15px;
  101.            background: #cccccc;   
  102.            }

ahora el problema que tengo es que en el campo del boton no me quiere cargar la imagen para el boton, no se si tengan alguna idea de porque pudiera ser?
el boton lo cargo con class="buscar" asi:

Código HTML: 
Ver original
  1. <button name=cod class=buscar value="BUSCAR"></button>
Última edición por jmg1189; 30/09/2015 a las 07:48
  #5 (permalink)  
Antiguo 30/09/2015, 07:53
Avatar de michellqm  
Fecha de Ingreso: septiembre-2015
Mensajes: 21
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: crear clases para tablas diferentes
Hola c:

te has volado las comillas del botón aunque no se si en tu código original esté así pero es

Código HTML: 
Ver original
  1. <button name="cod" class="buscar" value="BUSCAR"></button>

ahora bien, si no es por eso copiame tu clase a ver que contiene

Saludos

Etiquetas: html
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:09.