Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

[Duda] no logro hacer que los estilos de css en la tabla se vean reflejados en el navegador

header{
    background-color: #bbbbbb;
    padding: 20px 0;
}

.caja{
    width:940px;
    position: relative;
    margin:0 auto;  
}

img{
    height: 250px;

}


nav{
    position:absolute;
    top: 110px;
    right:0; 
}

nav li{
    display: inline;
    /*inline permite no ocupar toda la pagina solo el esapcio necesario */
    margin: 15px;
}

nav a{
    /*este propiedad hace que el texto sea en mayuscula */
    text-transform: uppercase;
    color:black;
    /*esta es para que el texto que esta en negriya*/
    font-weight: bold;
    /*esta permite decidir que tamaño llevara el texto*/
    font-size: 22px;
    /*esta permite decidir si el texto tendra decoracion de texto */
    text-decoration: none;
}

nav a:hover{
    /*hover es para capturar el movimiento del mouse y asi cambie color en donde este el mouse*/
    color: #c78c19;
    /*sirve para que el texto este subrrayado */
    text-decoration: underline;
}
.productos{
    width:940px;
    margin:0 auto;
    /*para dar espaciamiento interno del item  */
    padding:50px;
}
.productos li{
    display: inline-block;
    text-align:center;
    /*con este atributo se puede decidir el tipo de fuente de la letra */
    font-style: oblique;
    width:30%;
    vertical-align:top;
    /*para separar de la zona vertical y zona lateral del espaciamiento de los items, 0 vertical y 1.5 laterales */
    margin:0 1.5%;
    padding:30px 20px;
    box-sizing: border-box;
    border: 2px solid #000;/*de esta forma es la version corta de la aprte de abajo*/
   /* border-color: #000;
    border-width:2px;
    border-style:solid;*/
    border-radius: 10px;
}

.productos li:hover{
    border-color:#c78c19;
}

.productos li:active{
   /*el color cambia cuando le damos click*/
    border: color #088c19;
}

.productos h2{
    font-size:30px;
    font-weight:bold;
}

.productos li:hover h2{
    font-size:33px;
}

.produto-descirpcion{
    font-size:18px;

}

.producto-precio{
    font-size:20px;
    font-weight:bold;
    margin-top:10px;
}

footer{
    text-align:center;
    /*url sirve para poder poner una foto desde el css ademas de que si añadimos el background la imagen se duplicara para poder llenar toda la parte de pie de pagina*/
    background: url(imagenes/footer.jpg);
    padding:40px;
    margin:10px 0;
}

.copyright{
    font-size:13px;
    color:#ffffff;
    margin:20px;
}

main{
    width:940px;
    margin:0 auto;
}

from{
    margin:40px 0; 
}

/*si ponemos una coma podremos seleccionar mas de un elemento del html para que asi 1 o varios compartan diseños sin necesidad de añadir mas lineas de codigos*/
from label, from legend{
    display:block;
    font-size:20px;
    margin:0 0 10px;
}


.input_padron{
    display:block;
    margin: 0 0 20px; 
    /*el primer numero es arriba y abajo el segundo numero es izquierda y derecha */
    padding:10px 25px;
    width:50%;
}

.checkbox{
    margin: 20px 0;
}

.enviar{
    width:40%;
    padding:15px 0;
    font-size:18px;
    /*font-weight sirve para aumentar o disminuir el grosor de la letra bold aumenta el grosor y lighter es para disminuir */
    font-weight:bold;
    color:white;
    background:orange; 
    border:none;
    border-radius: 5px;
    /*sirve para que el boton que tenga esta propiedad haga un tipo de transicion al momento de caragr la pagina o de poer el mouse encima */
    transition: 5s all;
    /*sirve para que el mouse haga un cambio a la hora de que se pone encima del buton */
    cursor:pointer;
}

.enviar :hover{
    background: red;
    /* scale sirve para que el boton aumente de tamaño cuando el cursor esta encima de el */
    transform: scale(1.2);
    /*rotate sirve para que el boton gire una cantidad de grados los cuales se definen como deg
    transform: rotate(70deg);*/

}

table{
    margin:40px 40px;
}

thead{
    background:darkorange;
    color:black;
    font-weight:bold;
}

td , th{
    border:1px solid #000;
    padding:8px 15px;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

4 respuestas

pues tu codigo se ve bien, algunas veces si usas visual studio code no se guarda bien y debes guardar en cada una de las pestañas podrias intentar eso, pero igual revisa tus etiquetas en el html

hola bro,

quizá no conectaste tu CSS a tu HTML con la etiqueta link o puede que no hayas nombrado correctamente ls clases o elementos html en tu css

Buenas tardes amigo,

revisa el código html, tal vez no esta conectando los stilos del css con este,

            <table>
                <thead>
                    <tr>
                        <th>Día</th>
                        <th>Horario</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lunes</td>
                        <td>08h - 20h</td>
                    </tr>
                    <tr>
                        <td>Miércoles</td>
                        <td>08h - 20h</td>
                    </tr>
                    <tr>
                        <td>Viernes</td>
                        <td>08h - 20h</td>
                    </tr>
                </tbody>
           </table>

Puede ser que no hayas conectado todavía el css, pero viendo ya tienes los estilos lo que se me ocurre es los vuelvas a copiar, a veces el editor de código no lee algunas veces. Si el erro persiste intenta cambiarlo pero usando ahora clases para las propiedades de la tabla.