2

Tengo una tabla General, la cual le aplico los estilos de la siguiente manera:

#tableGral {
    width: 100%;
    min-width: 1300px;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 60%;
}

table#tableGral td
{
    border: 1px solid lightgrey;
    white-space: nowrap;
    vertical-align: top;
}

El detalle que tengo, es que en algunas celdas de la tabla principal o general, tengo otras tablas. Lo que deseo es que estas tablas hijas no contengan bordes. He intentado de varias maneras, pero me sigue tomando el borde de la tabla principal:

.tableHija {
    border-collapse: collapse;
    width: 100%;
}

table.tableHija td {
    margin-right: 7px;
    font-size: 9px;
    border: none;
}

Un ejemplo completo:

#tableGral {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 80%;
}

table#tableGral td {
    border: 1px solid lightgrey;
    white-space: nowrap;
    vertical-align: top;
}

.tableHija {
    border-collapse: collapse;
    width: 100%;
}

table.tableHija td {
    margin-right: 7px;
    font-size: 9px;
    border: none;
}
<table id="tableGral">
 <tr>
   <td>Columna 1</td>
   <td><table class="tableHija">
     <tr>
       <td>Columna 1 de la tabla hija</td>
       <td>Columna 1 de la tabla hija</td>
     </tr>
   </table></td>
   <td>Columna 3</td>
 </tr>
</table>

7
  • Creo que no es buna idea tener tablas dentro de tablas, pero si agregas tu HTML quizas podamos ayudarte.
    – alanfcm
    el 19 jun. 2019 a las 18:39
  • Gracias, lo resolvi con JQuery
    – PolloKulos
    el 19 jun. 2019 a las 18:49
  • @PolloKulos si lo resolviste, te aconsejo que publiques una respuesta mostrando lo que hiciste. el 19 jun. 2019 a las 19:01
  • Agregue lo siguiente: $('.NoBorder').css('border', 'none'); donde, 'NoBorder es el nombre de la clase que le puse al td'
    – PolloKulos
    el 19 jun. 2019 a las 20:34
  • para eso no necesitas jQuery, solo estás aplicando una clase, ponlo en la hoja de estilos
    – user7176
    el 20 jun. 2019 a las 7:06

2 respuestas 2

3

Descripción del problema:

Debes indicar con precisión la jerarquía a la que quieres aplicar el estilo table#tableGral td ya que tal y como está se aplicará a cualquier elemento <td> que sea descendiente de table#tableGral, sea cual sea el nivel de descendencia (tabla, sub tabla, sub sub tabla, etc) debido a tiene mayor prioridad este selector al que usaste en table.tableHija td por tener una menor especificidad.

Uso del selector de hijo (descendiente directo >):

Indicando table#tableGral > tbody > tr > td se aplicará únicamente a los elementos que sigan estrictamente ese orden de descendencia. Hay que tener en cuenta que, aunque no tengas un <tbody>, debes indicarlo explícitamente en el selector de clase.

var obtenerSelector = (elemento) => {
  var etiqueta = elemento.tagName.toLowerCase();
  if (etiqueta == "html") {
    return "html";
  }
  if (elemento.id != '') {
    etiqueta += '#' + elemento.id;
  } else if (elemento.className) {
    etiqueta += '.'
      + elemento.className.replace(/\s+/g, '.');
  }
  return obtenerSelector(elemento.parentNode)
    + " > " + etiqueta;
}
/* Mostramos la ruta al elemento por consola */
console.log(
  obtenerSelector(
    document.getElementById('ejemplo')
  )
);
#tableGral {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 80%;
}

/* Especificamos la descendencia correctamente */
table#tableGral > tbody > tr > td {
    border: 1px solid lightgrey;
    white-space: nowrap;
    vertical-align: top;
}

.tableHija {
    border-collapse: collapse;
    width: 100%;
}

/* Aquí también deberíamos hacerlo */
table.tableHija > tbody > tr > td {
    margin-right: 7px;
    font-size: 9px;
    border: none;
}
<table id="tableGral">
 <tr>
   <td>Columna 1</td>
   <td><table class="tableHija">
     <tr>
       <td>Columna 1 de la tabla hija</td>
       <td id="ejemplo">Columna 2 de la tabla hija</td>
     </tr>
   </table></td>
   <td>Columna 3</td>
 </tr>
</table>

El código javascript que he agregado te muestra el selector o ruta al elemento <td> de la subtabla, para que veas cómo existen elementos <tbody> que se han creado implícitamente:

html > body > table#tableGral > tbody > tr > td
  > table.tableHija > tbody > tr > td#ejemplo

Uso de excepción (!important):

De la documentación:

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important no tiene nada que ver con especificidad, interactúa directamente con ésta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo.

Un ejemplo del uso de !important se muestra a continuación:

#tableGral {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 80%;
}

table#tableGral  td {
    border: 1px solid lightgrey ;
    white-space: nowrap;
    vertical-align: top;
}

.tableHija {
    border-collapse: collapse;
    width: 100%;
}

table.tableHija td {
    margin-right: 7px;
    font-size: 9px;
    /* Aquí indicamos que debe prevalecer por encima de otros */
    border: 0px none !important;
}
<table id="tableGral">
 <tr>
   <td>Columna 1</td>
   <td><table class="tableHija">
     <tr>
       <td>Columna 1 de la tabla hija</td>
       <td id="ejemplo">Columna 2 de la tabla hija</td>
     </tr>
   </table></td>
   <td>Columna 3</td>
 </tr>
</table>

Pero sólo se debería usar !important como último recurso, lo ideal es ser más conciso al establecer los estilos.

0

Tienes un problema de especificidad. Para dar estilo a la tabla general utilizas un id #tableGral, mientras que para dar estilo a la tabla hija utilizas como selector una clase: table.tableHija. De esta manera los estilos de la #tableGral prevalecen.

Para solucionar tu problema puedes utilizar este selector: table#tableGral td table.tableHija td {}en lugar de table.tableHija td {}

#tableGral {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 80%;
}

table#tableGral td {
    border: 1px solid lightgrey;
    white-space: nowrap;
    vertical-align: top;
}

.tableHija {
    border-collapse: collapse;
    width: 100%;
}

table#tableGral td table.tableHija td {
    margin-right: 7px;
    font-size: 9px;
    border: none;
}
<table id="tableGral">
 <tr>
   <td>Columna 1</td>
   <td><table class="tableHija">
     <tr>
       <td>Columna 1 de la tabla hija</td>
       <td>Columna 1 de la tabla hija</td>
     </tr>
   </table></td>
   <td>Columna 3</td>
 </tr>
</table>

0

Tu Respuesta

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

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