poner - tablas css

Usa colorear filas de tabla para celdas en Bootstrap

Question

Twitter Bootstrap ofrece clases para colorear filas de tablas de esta manera:

<tr class="success">

Me gusta la elección del color y la clase de nombres. Ahora lo que me gustaría hacer es reutilizar estas clases y aplicarlas también en las celdas de la tabla. Obviamente, podría definir mis propias clases con los mismos colores y terminar con ellas.

Pero hay una taquigrafía en CSS. ¿MENOS, dejar que el td herede las clases?

Answer 1

Con la versión actual de Bootstrap (3.3.7), es posible colorear una sola celda de una tabla así:

<td class = ''text-center col-md-4 success''>

Answer 2

Con menos puedes configurarlo de esta manera;

.table tbody tr {
    &.error > td { background-color: red !important; }
    &.error:hover > td { background-color: yellow !important; }
    &.success > td { background-color: green !important; }
    &.success:hover > td { background-color: yellow !important; }
    ...
}

Eso hizo el truco para mí.

Answer 3

Html actualizado para el bootstrap más nuevo

    .table-hover > tbody > tr.danger:hover > td {
     background-color: red !important;
}
.table-hover > tbody > tr.warning:hover > td {
     background-color: yellow !important;
}
.table-hover > tbody > tr.success:hover > td {
     background-color: blue !important;
}

Answer 4

La conclusión es que tendrá que escribir una nueva regla de css para eso.

Dependiendo del paquete de Twitter Bootstrap que estés usando, deberías tener variables para los distintos colores.

Intenta algo como:

.table tbody tr > td {
  &.success { background-color: $green; }
  &.info { background-color: $blue; }
  ...
}

Seguramente hay una forma de usar extend o el MENOS equivalente para evitar repetir el mismo estilo.

Answer 5

Puede anular las reglas de css predeterminadas con esto:

.table tbody tr > td.success {
  background-color: #dff0d8 !important;
}

.table tbody tr > td.error {
  background-color: #f2dede !important;
}

.table tbody tr > td.warning {
  background-color: #fcf8e3 !important;
}

.table tbody tr > td.info {
  background-color: #d9edf7 !important;
}

.table-hover tbody tr:hover > td.success {
  background-color: #d0e9c6 !important;
}

.table-hover tbody tr:hover > td.error {
  background-color: #ebcccc !important;
}

.table-hover tbody tr:hover > td.warning {
  background-color: #faf2cc !important;
}

.table-hover tbody tr:hover > td.info {
  background-color: #c4e3f3 !important;
}

!important es necesario porque bootstrap en realidad colorea las celdas individualmente (afaik no es posible simplemente aplicar color de fondo a tr). No pude encontrar ninguna variable de color en mi versión de bootstrap, pero esa es la idea básica de todos modos.