PROBLEMA CON TABLA

[Carlos Gonzalez]

Que tal amigos soy nuevo en esto de HTML y php, quiero hacer una tabla como la de la imagen, que por medio de un valor me de el color de la fila, ya hice la tabla y pinte los datos con mysql el problema es para ponerle el color.

De ante mano muchas gracias

[Luis Gonzálo Hernández Giraldi]

Debes crear una clase (cSS) con el color normal de la fila... y otra con el color dado por el valor (o valores)

En la iteraccion (for / while) pones asignas a la fila en cuestion (que tiene el valor a considerar) la clase que corresponde

Seudocodigo:

Para cada registro hacer

   si datos es = a XX, etiqueta HTML clase Color1

  Si no Clase Color2.

....

Fin para

Me refiero a atributo Class de la etiqueta <TR>

Atento a vuestros comentarios

Luis Gonzalo Hernández Giraldi
Analista de Sistemas Computacionales 

​

Abjurar

​ ​

Renegar de una creencia u opinión con juramento

--
Has recibido este mensaje porque estás suscrito al grupo "PHP Latinoamérica" de Grupos de Google.
Visita este grupo en https://groups.google.com/group/phplatinoamerica.

[Carlos Gonzalez]

Tengo un archivo CSS que da color a la table y las filas y otro con el color de la fila, pero no me realiza ningún cambio, podrías ayudarme. a comprender este tema,, te comparto los archivos.

los encontré en la red,

Codigo donde pinto la tabla:

<table class = "fancyTable" id="mytable01">

Codigo del CSS (para pintar la tabla)

.divider {
 margin-top: 40px;
 }
 
.button {
 /* appearance */
 background-color: #3f3f3f;
 background-image: -moz-linear-gradient(
  top,
  rgba(255,255,255,0.0) 0%,
  rgba(255,255,255,0.1) 50%);
 
 background-image: -webkit-gradient(
  linear, left top, left bottom,
  color-stop(100%,rgba(255,255,255,0.0)),
  color-stop(50%,rgba(255,255,255,0.1)));
 border: 1px solid #000000;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
 -moz-box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
 box-shadow: 0 1px 0 rgba(139,139,139,1) inset, 0 1px 0 rgba(88,88,88,1);
 cursor: pointer;
 
 /* position */
 display: inline-block;
 margin: 10px;
 
 /* size */
 padding: 0 10px;
 
 /* text */
 color: #eaeaea;
 font-size: 12px;
 line-height: 30px;
 text-decoration: none;
 white-space: nowrap;
 }
.button:hover {
 /* appearance */
 background-color: #6495ed;
 -webkit-box-shadow: 0 0 3px #6495ed;
 -moz-box-shadow: 0 0 3px #6495ed;
 box-shadow: 0 0 3px #6495ed;
 }

.myTableWrapper {
 width: 800px;
 height: 500px;
 }

.height250 {
        height: 250px;
        overflow-x: auto;
        overflow-y: auto;
}

.height400 {
        height: 400px;
        overflow-x: auto;
        overflow-y: auto;
}

.fancyTable td, .fancyTable th {
 /* appearance */
 border: 1px solid #778899;
 
 /* size */
 padding: 5px;
 }

.fancyTable {
 /* text */
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
.fancyTable tbody tr:hover {
background-color: #16D6B0;
}
.fancyTable tbody tr td {

Codigo de la validación:

           if($key[estatus] == 'P'){
           echo '<script language="javascript">alert("ESTATUS 3");</script>'; 
echo "<tr class=TableColor><center><td><center>$key[folio_comp]</center></td><td><center>$key[fecha]</center></td><td><center>$key[entrego]</center></td></tr>\n";
          
           }else{

           }

Codigo del segundo CSS(para pintar la fila):

#TableColor, #TableColor2, #TableColor3, #TableColor4 {
  width:100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border: 1px solid #000102;
  padding: 5px;
  background-color: #16D6B0;
}
/* Estilos de tabla para mostrar cada linea de color difenete (par e impar) tipo cebra */
#TableColor tr:nth-child(odd) {
  background-color: #DDD;
   border: 1px solid #000102;
}

#TableColor tr:nth-child(even) {
  background-color: #666;
   border: 1px solid #000102;
}

/* Estilos de tabla para mostrar filas diferente color cada tres elementos*/
#TableColor2 tr:nth-child(3n+0) {
  background-color: #666;
  color:#FFF;
  border: 1px solid #000102;
}

/* Estilos de tabla para mostrar filas de diferente color, sólo los primeros tre elementos*/
#TableColor3 tr:nth-child(-n+3) {
  background-color: #DDD;
  color:#777;
  border: 1px solid #000102;
}

/* Estilos de tabla para mostrar filas de diferente color, sólo los últimos dos elementos, lo que se hace ordenar que se empiece desde el elemento 4*/
#TableColor4 tr:nth-child(n+4) {
  background-color: #f2f2f2;
  color:#777;
  border: 1px solid #000102;
}

[Gildus]

Holas,

Te recomiendo que lo versiones con git por ejemplo en un github o gitlab, etc. Y allí podemos creo ayudarte mejor.

Éxitos,
Gildus