1

Tengo un problema que me esta dando un dolor de cabeza, tengo una hoja de estilo de tabla y no funciona como deseo pero si funciona cuando pone el !important; pero lo que deseo es que cuando en html ponga las clase que quiero funcione este es mi hoja de estilo css

esta es la hoja de html de prueba

:root {
    --green: #9cdd77;
    --negro: #000;
}

table {
    padding: 10px;
    position: relative;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    margin: auto;
}

thead[class="jm-table-df"],
tr>th {
    background-color: var(--negro);
    color: white;
}

th,
td {
    text-align: center;
    padding: 10px;
}

.responsives {
    overflow-x: auto;
}


/***
otros estilos para tablas

** */

thead[class="jm-table-green"],
tr>th {
    background-color: var(--green);
    color: rgb(248, 248, 248)
}

thead[class~="jm-table-green"],
tbody,
tr,
td {
    color: #8d8a8a;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
    <link rel="stylesheet" href="css/janptable.css">
</head>

<body>
    <div class="modelo ">

        <div class="item5">

            <div class="responsives ml-3 mr-3">
                <table>
                    <thead class="jm-table-df">
                        <tr>
                            <th>nombre</th>
                            <th>apellidos</th>
                            <th>perfil</th>
                            <th>sexo</th>
                             </tr> 
                    </thead>
                  
                    <tbody>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>

                    </tbody>


                </table>
            </div>




        </div>
        <div class="item6">
        </div>
    </div>
</body>
<!--
-->
<script src="js/query-grd.js"></script>

</html>

En este momento me sale la clases green y si deseo poner otro estilo de table df no me sale a no ser que ponga un !important en la clase que deseo pero lo que quiero es que este configurado de manera que solo se maneje desde el html ya que lo que quiero es tener mas estilos. Gracias ante todo.

1
  • A ver si entiendo lo que quieres conseguir. El problema que tienes es que si quieres tener, por ejemplo, un estilo definido que sea jm-table-red con un fondo de color rojo para que la cabecera de tu tabla salga de ese color, lo que te está sucediendo es que te sigue saliendo verde a no ser que le pongas un important. ¿Correcto?
    – phpMyGuel
    Commented el 19 nov. 2019 a las 16:02

1 respuesta 1

2

El problema que estás teniendo es que no estás usando correctamente los selectores CSS. Cuando defines esta regla thead[class="jm-table-green"], tr > th estás afectando a los elementos de la etiqueta <thead> que tengan como clase jm-table-green y adicionalmente también a los elementos <th> que sean hijos directos de un <tr> por lo que el verde, basicamente, se va a aplicar a todas las cabeceras de tus tablas, independientemente de si sus <thead> tienen la clase jm-table-green o no.

Creo que tu intención era hacer algo como esto:

:root {
    --green: #9cdd77;
    --negro: #000;
    --rojo: red;
}

table {
    padding: 10px;
    position: relative;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    margin: auto;
    margin-bottom: 20px;
}

thead[class="jm-table-df"],
tr>th {
    background-color: var(--negro);
    color: white;
}

th,
td {
    text-align: center;
    padding: 10px;
}

.responsives {
    overflow-x: auto;
}


/***
otros estilos para tablas
** */

/* VERDE */

thead[class="jm-table-green"] > tr > th {
    background-color: var(--green);
    color: rgb(248, 248, 248)
}

thead[class="jm-table-green"] + tbody > tr > td {
    color: #8d8a8a;
}

/* ROJO */

thead[class="jm-table-red"] > tr > th {
    background-color: var(--rojo);
    color: rgb(248, 248, 248)
}

thead[class="jm-table-red"] + tbody > tr > td {
    color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
    <link rel="stylesheet" href="css/janptable.css">
</head>

<body>
    <div class="modelo ">
        <div class="item5">
            <div class="responsives ml-3 mr-3">
                <table>
                    <thead class="jm-table-df">
                        <tr>
                            <th>nombre</th>
                            <th>apellidos</th>
                            <th>perfil</th>
                            <th>sexo</th>
                             </tr> 
                    </thead>
                  
                    <tbody>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>

                    </tbody>


                </table>
                <table>
                    <thead class="jm-table-green">
                        <tr>
                            <th>nombre</th>
                            <th>apellidos</th>
                            <th>perfil</th>
                            <th>sexo</th>
                             </tr> 
                    </thead>
                  
                    <tbody>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>

                    </tbody>


                </table>
                <table>
                    <thead class="jm-table-red">
                        <tr>
                            <th>nombre</th>
                            <th>apellidos</th>
                            <th>perfil</th>
                            <th>sexo</th>
                             </tr> 
                    </thead>
                  
                    <tbody>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>
                        <tr>
                            <td>
                                jose
                            </td>
                            <td>
                                nevado
                            </td>
                            <td>
                                joseddddddddddd
                            </td>
                            <td>hombre

                            </td>
                        </tr>
                        <tr>
                            <td>sonia</td>
                            <td>Sanchez</td>
                            <td>sonia</td>
                            <td>mujer</td>

                        </tr>

                    </tbody>


                </table>
            </div>




        </div>
        <div class="item6">
        </div>
    </div>
</body>
<!--
-->
<script src="js/query-grd.js"></script>

</html>

1
  • si exactamente queria hacer eso muchas gracias @phpMyGuel
    – Janpweb
    Commented el 19 nov. 2019 a las 17:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.