-1

Buen día, necesito poder modificar el Blackground-Color de un td dentro de un tr, que se encuentra abarcado dentro de un table

<table class="table table-md table-lg table-clara table-striped tablesorter" id="tblCotizaciones_5" st-safe-src="$ctrl.safeOpciones" st-table="$ctrl.Opciones" ng-keydown="key($event)">
   <tr ng-repeat="Opc in $ctrl.Opciones | orderBy:$ctrl.SortTable.name:$ctrl.SortTable.reverse" ng-class="$ctrl.PintarFila(Opc)">
      <td class="numero">{{Opc.cierre | number :2}}</td>
   </tr>
</table>

El problema recae en que la clase table-striped de Boostrap, que pinta las filas de dos colores, uno a la vez, no me deja modificar el color del background-color. Es decir, que siempre mantiene la prioridad máxima, mas haya que le ponga !important. El estilo que le quiero dar en ciertas filas, por encima del table-stripes es:

<style>
.Subyacente {
    background-color: #194775 !important;
    border-color: #194775 !important;
    color: white;
}

</style>

Donde la función PintarFila(Opc) dentro del ng-class del tr, devuelve la clase Subyacente si la fila en la que se encuentra cumple una condición. Esto ya pude validar que funciona correctamente, el problema es que no logro hacer que me tome la clase Subyacente como prioridad por encima del table-striped.

De la clase Subyacente lo único que me toma actualmente es el color de las letras blanco.

2
  • ¿Has probado modificar el selector? Posiblemente no afecta porque la clase de boostrap tiene !important y un selector más especifico. Prueba a decirle que es el elementotr con esa clase dentro de un table con la clase table-striped
    – Rabegi
    el 16 sep. 2019 a las 13:57
  • Te agradezco por la respuesta, me podrías indicar un ejemplo de lo que me indicas. muchas gracias y disculpa la molestia. el 16 sep. 2019 a las 14:01

4 respuestas 4

1

Replicando el ejemplo con la información que nos proporcionas, funciona bien con el !important:

.Subyacente {
    background-color: #194775 !important;
    border-color: #194775 !important;
    color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Subyacente">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr class="Subyacente">
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

5
  • Es como decís, si lo hago con class en los tr, funciona. El tema es que necesito usarlo con el ng-class para poder pasarle el condicional y ahí es donde no me funciona. Mas haya de que el condicional funciona perfecto el 16 sep. 2019 a las 18:58
  • Desconozco como funciona angular, sin embargo no entiendo qué tiene que ver un simple condicional con css. Pareces estar confundido con algunos conceptos básicos.
    – Shaz
    el 16 sep. 2019 a las 19:02
  • En el ejemplo que pasaste, estas poniendo por defecto a la primera y ultima fila la clase Subyacente, por lo que siempre va a tomar ese estilo. Lo que necesito, que explique en un inicio es que se pinten determinadas filas, que cumplan con una condición. Por lo que te digo que si le pongo al tr la clase subyacente, lo pinta correctamente. Pero en cuanto le agrego un condicional para que pinte ciertas filas, funciona pero le da mas prioridad a el estilo del table-striped. el 16 sep. 2019 a las 19:07
  • Entnces tu problema es de angular, no de css. Explica mejor tu pregunta entonces, porque el título dice otra cosa.
    – Shaz
    el 16 sep. 2019 a las 19:09
  • No importa amigo, evidentemente yo no estoy logrando hacer que entiendas la problemática. Te agradezco de todas formas tu tiempo. el 16 sep. 2019 a las 19:11
1

Diría que es algo parecido a lo que ha dicho DavElsanto, sin embargo, en esa regla no se ven implicadas el número de clases, eso es realmente irrelevante.

El punto está en la selección, si, como él ha dicho, la fila se está viendo afectada por estas clases:

.table .table-md .table-lg .table-clara .table-striped .tablesorter

Añadirle una más arreglaría el problema, pero no porque el selector tenga un total de clases superior al otro, sino porque estás siendo más específico.

El selector anterior se traduciría en:

Un elemento con clase tablesorter, contenido en un elemento con clase table-striped, contenido en un elemento con clase table-clara, contenido en un elemento con clasetable-lg, contenido en un elemento con clasetable-md, contenido en un elemento con clasetable`.

Por ello, siendo más específico podrías solucionarlo. Con el ejemplo que tienes yo probaría con:

table.table.table-striped tr.Subyacente 

Eso se traduciría como:

Un tr con clase Subyacente contenido en un table con clases table y table-striped

2
  • Me párese interesante tu propuesta pero no estaría entendiendo como aplicarla. el 16 sep. 2019 a las 18:39
  • Ambos códigos son selectores css. Es la forma en la que seleccionas el elemento para añadirle estilo. Ambos irían en el css: table.table.table-striped tr.Subyacente { propiedades }
    – Rabegi
    el 17 sep. 2019 a las 6:38
0

Dejo la solución que encontré por si a alguien le pasa. El problema era que como ya venían con una estilo desde antes los td, al no especificar a que componente ataca mi clase siempre se pisaba. Para poderlo solucionar tuve que especificar bien a que componentes iba dirigida mi clase CSS.

.Subyacente>td{
}

De esta forma modifica el estilo de los td.

-1

Esto es un error clásico en css debes tener en cuenta que al momento de renderizar el css este toma como un cierto criterio sobre las clases, identificadores y estilos en linea (se realizan unas especies de sumas y toma el valor más alto).

se encuentra aca

.table .table-md .table-lg .table-clara .table-striped .tablesorter{
/*reglas css*/
}

con un total de 6 clases para dicho elemento.

Por lo tanto tendrías que agregar tu clase dentro de dicha regla para que al tomar una clase, esta sea la más alta y así sea tomada primero

.table .table-md .table-lg .table-clara .table-striped .tablesorter > .Subyacente{
/*reglas css*/
}

con lo cual tendrias un total de 7 clases para dicho elemento.

1
  • 1
    Separar dos selectores con espacio implica que aquel que está a la derecha es un hijo del anterior (izquierda), además se plantea una sintaxis extremadamente larga y específica para un problema sencillo, lo cual la hace potencialmente poco reutilizable. -1
    – Shaz
    el 16 sep. 2019 a las 16:09

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.