[SOLUCIONADO] Problema con CSS mostrando datos de MySql

[walol]

Hola!..

Acabo de conocer el foro, y me inscribí para ver si pueden ayudarme en mis dudas de noob xD, y así seguir aprendiendo.. les agradezco de antemano el tiempo y dedicación para los desvalidos de conocimiento!..

Sucede que tengo una base de datos pequeña, de sólamente una tabla, con productos dentales. Ahora, necesito mostrar esos productos (actualmente los muestro poniéndolos manualmente en el código HTML, por eso estoy creando este administrador, para el dueño de la página).

El problema es que no funciona el código que, en teoría, debería mostrarme los datos con el estilo que le puse :(..

Este es el código:

Código PHP:

<?php
 
include("conexion.php");
 
$request = "SELECT * FROM productos WHERE tipo='Cementos'";
$result = mysqli_query($conexion,$request);
 
echo"<div class='bordes'>
    <div align='center'>
        <h1><strong>CEMENTOS</strong></h1>
    </div>
</div>";
 
echo "<div class='CSSTableGenerator'><table>";
echo "<tr>";
while ($row = mysqli_fetch_array($result))
{
    echo "<td>";
    echo "<p><strong>".$row['nombre']."</strong></p><p><strong>".$row['laboratorio']. "</strong></p>";
    echo "</td>";
    echo "<br/>";
}
echo "</tr>";
 
echo "</table></div>";
 
 
mysqli_close($conexion);
?>
 

y el CSS

Código CSS:

.CSSTableGenerator {
margin:0px;padding:0px;
width:100%; box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
 
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
 
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
 
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
 
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
background-color:#e5e5e5;
}
.CSSTableGenerator td{
vertical-align:middle;
    background:-o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );    background:-moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");  background: -o-linear-gradient(top,#ffffff,e5e5e5);
background-color:#ffffff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
    background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color:#cccccc;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:navy;
}
.CSSTableGenerator tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color:#cccccc;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
 

Me muestra lo que estoy solicitando, pero sin el estilo en cuestión..
No creo que sea problema del CSS, pues me funciona con los productos agregados manualmente...
Qué podrá ser?

Saludos y muchísimas gracias por su tiempo!

[pzin]

Bienvenido al foro.

¿Puedes ser más concreto con tu problema? ¿Qué estilos —CSS— no se aplican a qué elementos —HTML?

[walol]

Iniciado por Bonez

Bienvenido al foro.

¿Puedes ser más concreto con tu problema? ¿Qué estilos —CSS— no se aplican a qué elementos —HTML?

Si lo siento!, olvidé poner ese importante detalle!...

Código PHP:

echo "<div class='CSSTableGenerator'><table>";
echo "<tr>";
 

Específicamente esa clase (CssTableGenerator) debería aplicarse a la tabla que creé!.. junto con estas columnas..

Código PHP:

echo "<td>";
echo "<p><strong>".$row['nombre']."</strong></p><p><strong>".$row['laboratorio']. "</strong></p>";
echo "</td>";
 echo "<br/>";
 

Y en la página, se ve todo como si lo mostrara simplemente con un echo, sin el formato CSS

Se entiende ahora?..

Cualquier otro dato que necesiten saber, responderé a la brevedad..

[pzin]

Ese selector se aplicará al elemento div, no a la tabla porque así lo tienes puesto en el HTML.

[walol]

Iniciado por Bonez

Ese selector se aplicará al elemento div, no a la tabla porque así lo tienes puesto en el HTML.

Gracias por tu respuesta!... pero no aún no se soluciona.
En el HTML que tengo con el código, el CSS también lo aplico al div, y funciona todo perfecto..

De todas formas ya había probado cambiando el class='CssTableGenerator', quedando <table class='CssTableGenerator'>, pero no, sigue viéndose igual :(

EDIT: ya lo solucioné!.. no sé cuál habrá sido el problema, pero terminé solucionándolo poniendo todo el CSS en el <head>, sé que no es una buena práctica, pero no se me ocurrió nada más!.. al menos así si me da el formato..

Saludos agradezco su ayuda!