0

Tengo una tabla construida desde un PHP tal que así:

$tabla ="<table class='table  table-condensed  table-striped text-center' >";
$tabla .="<thead>";
$tabla .= "<tr>";
$tabla .="<th>#</th>";
$tabla .="<th>Tarif</th>";
$tabla .="<th>Origen</th>";
$tabla .="<th>Destino</th>";
$tabla .="<th>Estado</th>";
$tabla .="</tr>";
$tabla .="</thead>";
//Cuerpo de la tabla
$tabla .="<tbody>";

try { 
    //pasar la consulta a la conexion
    $resultado=$conn->prepare($sql1);     
    $resultado->execute();


    while($row = $resultado->fetch()) {


        $datos=$row[0]."/".$row[10]."/".$row[11]."/".$row[8]."/".$row[9];

        $tabla .="<tr>";
        $tabla .='<td>'. $row[7].'</td>';
        $tabla .='<td>'. $row[8].'</td>';
        $tabla .='<td>'. $row[2].'</td>';
        $tabla .='<td>'. $row[3].'</td>';
        $tabla .='<td><button class="btn btn-warning" data-toggle="modal" data-target="#modalVerBillete" onclick="cargaDatos(\''.$datos.'\')"></button></td>';
        $tabla .="</tr>";
    }
    //cierre del cuerpo y de la tabla
    $tabla .="</tbody>";
    $tabla .="</table>";

    echo $tabla;

Quiero cambiar el tamaño de la letra tanto de cabeceras como de celdas pero no lo consigo con una hoja de estilos.

La tabla se carga en un div HTML de esta manera:

<div class="container-fluid" id="contenidoTabla">
     <!-- Aqui va la tabla -->

</div>

He probado a poner en una hoja de estilos:

#contenidoTabla{
font-size: 5px; 
}

td{
font-size: 5px; 
}

th{
font-size: 5px; 
}

Pero no cambia nada. Agradecería alguna sugerencia. Gracias.

3
  • Estas usando Bootstrap, ¿cierto?. Si es así, ¿qué versión?
    – Marcos
    el 3 oct. 2019 a las 19:49
  • Es la versión 4
    – Luis
    el 3 oct. 2019 a las 19:55
  • Es probable que alguna otra regla tenga prioridad sobre las que has creado. Intenta agregando !important a las que menciones, es decir, font-size: 5px !important;. Si funciona quiere decir que es lo que he dicho, si no funciona, puede ser que no estés cargando correctamente tu hoja de estilos.
    – Marcos
    el 3 oct. 2019 a las 20:00

2 respuestas 2

2

El CSS funciona, como podrás ver más adelante en la prueba.

Si no te funciona es porque:

  1. No estás poniendo la tabla donde va. Podrías hacer esto, para no estar abriendo y cerrando bloques de código:

    #Abrimos el div
    echo '<div class="container-fluid" id="contenidoTabla">';
    
        # ... codigo PHP que crea y llena la tabla
        #Debes imprimir la tabla dentro de este bloque div
        echo $tabla; 
    
    #Cerramos el div
    echo '</div>';
    

    Para que sea más fácil quizá puedes concatenar también el div en la variable.

  2. No estás agregando correctamente el CSS.

Prueba

He cambiado ad libitum algunos valores como tamaño de letras y colores, sólo para que veas que funciona.

#contenidoTabla {
  font-size: 15px;
}

td {
  font-size: 15px;
  color: red;
}

th {
  font-size: 25px;
  color:green;
}
<div class="container-fluid" id="contenidoTabla">
  <table class="table  table-condensed  table-striped text-center">
    <thead>
      <tr>
        <th>#</th>
        <th>Tarif</th>
        <th>Origen</th>
        <th>Destino</th>
        <th>Estado</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>2</td>
        <td>3</td>
        <td><button class="btn btn-warning" data-toggle="modal" data-target="#modalVerBillete"></button></td>
      </tr>
    </tbody>
  </table>
</div>

2
  • 1
    ¿No deberíamos simplemente comentar que el código si funciona y que lo que plantea no se puede reproducir? ¿Y quizás pedirle más información? Digo... en principio no estás respondiendo realmente la pregunta. Es más estoy casi seguro de que el problema son los estilos de Bootstrap
    – Marcos
    el 3 oct. 2019 a las 19:47
  • Hola. La tabla va a ese div con un Ajax que la trae del PHP y se carga perfectamente. ¿podría estar relacionado con el orden en el que se carga el código?. A la hoja de estilos la llamo en el Header y la tabla aparece mas tarde. Quiero decir que la tabla no se carga al abrir la página, sino al interactuar con un botón. No se, por dar ideas.
    – Luis
    el 3 oct. 2019 a las 19:59
0

Pues mira por donde tiene que ser cosa de los estilos del Bootstrap. Lo he solucionado añadiendo el tamaño de letra dentro la linea de definición de la tabla:

$tabla ="<table class='table  table-condensed  table-striped text-center' style='font-size: 5px;> ";

De esta manera lo toma perfectamente.

3
  • Seria bueno poder determinar exactamente porque no puedes sobrescribir los estilos con CSS. Pero, si esta solución te satisface, enhorabuena!. Recuerda que puedes marcar tu respuesta como la más acertada.
    – Marcos
    el 3 oct. 2019 a las 20:11
  • Si, seria bueno pero no tengo capacidad para ello. Me he dado cuenta de que al hacerlo así desaparece la cabecera de la tabla. Otro misterio.
    – Luis
    el 3 oct. 2019 a las 20:15
  • Es porque te falta cerrar las comillas simples. Es decir, style='font-size: 5px;' <-- esta comilla
    – Marcos
    el 3 oct. 2019 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.