Me gustaría que mi tabla responsiva tuviese un mejor aspecto

Estoy creando una aplicación web para la cual uso tablas que necesito que sean responsive.

A tamaño de visualización de un ordenador, la vista es esta:

Y a vista de movil es esta:

Me gustaría que en esta segunda vista pudiese ver también los campos fijos, agua luz gas etc, todos los campos.

Os dejo mi código para que me podáis ayudar:

<section class="hero-banner magic-ball" id="pagos">
  <div class="row align-items-center text-center text-md-center" >
    <div class="col-md-8 col-lg-5 mb-5 mb-md-0" >
      <h2>Gestión de pagos:</h2>
        <div class="table-responsive">
      <table class="table table-bordered table-striped" width="500" style="margin-left: 100px; ">
        <thead class="thead-dark">
        <tr>
          <th >Mes</th>
          <th >Valor</th>
          <th >Luz</th>
          <th >Agua</th>
          <th >Gas</th>
          <th >Total</th>
          <th >Pagado</th>
        </tr>
        </thead>
         <?php
         $sqletotal= $sqle["Valor"]+$sqle["Luz"]+$sqle["Agua"]+$sqle["Gas"];
             echo "<tbody><tr><th >".$sqle["Mes"]."</th><td>".$sqle["Valor"] . "</td><td>".$sqle["Luz"] ."</td><td>".$sqle["Agua"] ."</td><td>".$sqle["Gas"] ."</td><td>".$sqletotal ."</td><td>".$sqle["Cobrado"] ."</td></tr>"  ;
         if (mysqli_num_rows( $sqlw) > 0 ) {
         while($sqlr = mysqli_fetch_assoc($sqlw)) {
             $sqltotal= $sqlr["Valor"]+$sqlr["Luz"]+$sqlr["Agua"]+$sqlr["Gas"];
         echo "<tr><th>" .$sqlr["Mes"] .  "</th><td>".$sqlr["Valor"] . "</td><td>".$sqlr["Luz"] ."</td><td>".$sqlr["Agua"] ."</td><td>".$sqlr["Gas"] ."</td><td>".$sqltotal ."</td><td>".$sqlr["Cobrado"] ."</td></tr>" ; }}?>
          </tbody> </table>
        </div>
    </div></div>
</section>

Añade tu respuesta

Haz clic para o