2

Estoy intentando pintar una linea de una tabla.

tr.cambiar-color td {
  background-color: #505050; //Esta linea no la uso en Boostrap
  color: #FFFFFF
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<table class='table'>
  <thead>
    <th>Titulo 1</th>
    <th>Titulo 1</th>
    <th>Titulo 1</th>
  </thead>
  <tbody>
    <tr class="cambiar-color">
      <td>Linea 1</td>
      <td>Linea 1</td>
      <td>Linea 1</td>
    </tr>
    <tr>
      <td>Linea 2</td>
      <td>Linea 2</td>
      <td>Linea 2</td>
    </tr>
    <tr>
      <td>Linea 3</td>
      <td>Linea 3</td>
      <td>Linea 3</td>
    </tr>
    <tr>
      <td>Linea 4</td>
      <td>Linea 4</td>
      <td>Linea 4</td>
    </tr>
  </tbody>
</table>

Este codigo funcionada bien con puro html, pero con boostrap no funciona. El texto no se aplica en blanco, sigue aplicándose la regla por defecto. Como puedo hacer que cualquier elemento dentro de <tr> tenga texto blanco.

EDITADO

Al agregar !important tampoco funciona.

2 respuestas 2

3

lo que pasa es que bootstrap no te va a permitir hacer ello ya que te lo define asi, pero podrias utilizar esto

.cambiar-color td { 
  color: #FFFFFF ; 
}
2
  • Hola que tal. Ya he probado de esa manera y aun así no funciona.
    – Legna
    el 19 jun. 2019 a las 17:35
  • Hola amigo lo que pasa es que solo debes llamar a tu clase asignandole a tu td de la manera que te edito en la aprte de arriba el 19 jun. 2019 a las 17:43
2

A tu estilo CSS solo hace falta definir que se aplicara a las etiquetas <td> que están dentro del <tr> con clase cambiar-color

Y dos errores:

  1. Los comentarios en CSS van dentro de /* y */
  2. Te falta el ; al final del estilo color

tr.cambiar-color td {
  background-color: #505050; /*Esta linea no la uso en Boostrap*/
  color: #FFFFFF;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <table>
      <thead>
        <th>Titulo 1</th>
        <th>Titulo 1</th>
        <th>Titulo 1</th>
      </thead>
      <tbody>
        <tr class="cambiar-color">
          <td>Linea 1</td>
          <td>Linea 1</td>
          <td>Linea 1</td>
        </tr>
        <tr>
          <td>Linea 2</td>
          <td>Linea 2</td>
          <td>Linea 2</td>
        </tr>
        <tr>
          <td>Linea 3</td>
          <td>Linea 3</td>
          <td>Linea 3</td>
        </tr>
        <tr>
          <td>Linea 4</td>
          <td>Linea 4</td>
          <td>Linea 4</td>
        </tr>
      </tbody>
    </table>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
  </html>

5
  • No funciona tampoco. He editado la pregunta y agregue cdn para replicar el problema.
    – Legna
    el 19 jun. 2019 a las 17:41
  • OJO @Angel en el error de tu CSS, los comentarios van entre /* para abrir y */ para cerrar, modifica eso en tu código. o en su defecto quita la linea que dice //Esta linea no la uso en Boostrap y agrega el punto y coma al final del el estilo color: #FFFFFF
    – Arreguin92
    el 19 jun. 2019 a las 17:44
  • Gracias. Minimo detalle.
    – Legna
    el 19 jun. 2019 a las 17:47
  • Por nada @Angel, estamos para ayudarnos. Saludos
    – Arreguin92
    el 19 jun. 2019 a las 17:48
  • @Arreguin92 el punto y coma no es obligatorio si despúes del valor del atributo se cierra la llave, tampoco es necesario la etiqueta tr antes de la clase, sólo con .cambiar-color td basta. Aquí el error como dices, es claramente el comentario en CSS. el 19 jun. 2019 a las 18:22

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.