Cambiar el color del encabezado de la tabla usando bootstrap

Solución:

En tu CSS

th {
    background-color: blue;
    color: white;
} 

Simplemente puede aplicar uno de los colores de fondo contextuales de arranque a la fila del encabezado. En este caso (fondo azul, texto blanco): primario.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table class="table" >
  <tr class="bg-primary">
    <th>
        Firstname
    </th>
    <th>
        Surname
    </th>
    <th></th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
    <tr>
      <td>Jane</td>
      <td>Roe</td>
    </tr>
</table>

Aquí hay otra forma de separar el encabezado de la tabla y el cuerpo de la tabla:

thead th {
    background-color: #006DCC;
    color: white;
}

tbody td {
    background-color: #EEEEEE;
}

Eche un vistazo a este ejemplo para la separación de la cabeza y el cuerpo de la mesa. JsFiddleLink

---

---

Utiliza Nuestro Buscador