0

Hola hola tengo una pregunta como puedo hacer que esta tabla entre bien en el div ya intente de todo con whit 100% y con whit auto pero nada funciona enter image description here

Y este es mi codigo css.

.ssdpage {
  position: relative;
  height: auto;
  margin: 0.5pt auto 2pt auto;
  max-width: 100%;
  zoom: 135%;
}

.ssddiv {
  position: absolute;
}

.ssdspan {
  position: absolute;
  white-space: pre;
}

.ssdimg {
  position: absolute;
}

.ssdsvg {
  position: absolute;
}

.cs1 {
  font: 14pt 'Arial';
  color: #000000;
  font-weight: bold;
}

.cs2 {
  font: 7pt 'Arial';
  color: #000000;
}

.container {
  position: absolute;
}

table {
  margin-left: auto;
  margin-right: auto;
  font: 8pt 'Arial';
  color: #000000;
  text-align: center;
  max-width: 100%
}
**Y este es mi codigo html**
<div class="row" *ngIf="reporte.generado && !generandoReporte">

  <div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="print-section">

          <button class="btn btn-gradient-primary btn-rounded btn-fw" printSectionId="pruebapdf" [useExistingCss]="true" ngxPrint>
  Exportar a pdf
  </button>
        </div>
        <div id="pruebapdf" <div class="container" style="left: 50pt; top: 200pt;" width="100%" border="0">

          <table class="table table-striped table-bordered" style="text-align:center" width="100%" cellspacing="0" cellpadding="0">
          </table>
        </div>
      </div>
    </div>

  </div>

</div>
</div>

Alguien me puede ayudar con este pequeno problema? ya intente con whit 100% y con 100vh pero nada de esto funciona. hay alguna propiedad con la que estoy fallando o no la estoy utilizando

Y lo siento por esta pregunat noob pero ya busque en esta pagina y ninguna solucion me ayuda

2
  • Si alguna de las respuestas solucionó tu pregunta te animo a marcarla como aceptada y darle upvote. En caso contrario, déjanos comentarios para tratar de resolverlo de otra manera.
    – DjCrazy
    el 20 sep. 2022 a las 23:30
  • no no no ninguna de las respuestas me ayudo a solucionar mi problema el 23 sep. 2022 a las 22:21

2 respuestas 2

0

Hay muchos errores en HTML con la apertura y cierre de etiquetas div. Primero hay que controlar eso. Luego hay que saber estructurar los elementos: no es necesario poner cada elemento u objeto en su propio div.

Uno de los errores graves es lo siguiente

<div id="pruebapdf" <div class="container" style="left: 50pt; top: 200pt;" width="100%" border="0">

#pruebapddf se abre pero ¿DONDE SE CIERRA?

Puede un ejemplo como podría acomodar sin envolver el table en un div (solo un ejemplo)

.ssdpage {
  position: relative;
  height: auto;
  margin: 0.5pt auto 2pt auto;
  max-width: 100%;
  zoom: 135%;
}

.ssddiv {
  position: absolute;
}

.ssdspan {
  position: absolute;
  white-space: pre;
}

.ssdimg {
  position: absolute;
}

.ssdsvg {
  position: absolute;
}

.cs1 {
  font: 14pt 'Arial';
  color: #000000;
  font-weight: bold;
}

.cs2 {
  font: 7pt 'Arial';
  color: #000000;
}

.container {
  position: absolute;
}

table {
  margin-top: 200px;
  font: 8pt 'Arial';
  color: #000000;
  text-align: center;
  max-width: 100%;
  height: 300px;
  background-color: red
}
**Y este es mi codigo html**
<div class="row" *ngIf="reporte.generado && !generandoReporte">
  <div class="col-lg-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">

        <div class="print-section">
          
          <button class="btn btn-gradient-primary btn-rounded btn-fw" printSectionId="pruebapdf" [useExistingCss]="true" ngxPrint>Exportar a pdf</button>
        
          <table class="table table-striped table-bordered" style="text-align:center" width="100%" cellspacing="0" cellpadding="0"></table>
        </div>
      
      </div>
    </div>
  </div>
</div>

3
  • SI si si lo se es que elimine mucho codigo ya que ese hml tiene mas de 1000 lineas todos los div se cierran perfectamente pues mi amigo. Y pues mi amigo no entendi eso de poner la table dentro de un div me podrias dar un ejemplo @Narciso Aifuz el 13 sep. 2022 a las 18:38
  • El ejemplo en el snippet de mi respuesta. En ves de usar un contenedor solamente para la tablet, simplemente ubica table sin contenedor el 13 sep. 2022 a las 21:45
  • Ah ah ah okay okay ya elimine ese div y le pase el style pero igual se ve malll el 14 sep. 2022 a las 19:18
0

Alcanzo a notar que utilizas Bootstrap el cual tiene la clase table-responsive que agrega una barra de desplazamiento horizontal en la parte inferior de la tabla si desborda el tamaño del contenedor.

Nótese que esta clase se le agrega al contenedor de la tabla, no a la tabla.

Revisa la documentación aquí.

Ten en cuenta que no estoy usando tus estilos CSS y también ten cuidado con la recomendación de @narcisoaifuz en cuanto a...

...la apertura y cierre de etiquetas div...

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>

<body>
  <div class="row" *ngIf="reporte.generado && !generandoReporte">
    <div class="col-lg-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <div class="print-section">
            <button class="btn btn-gradient-primary btn-rounded btn-fw" printSectionId="pruebapdf" [useExistingCss]="true" ngxPrint>
              Exportar a pdf
            </button>
          </div>
          <div id="pruebapdf">
            <div class="container table-responsive" style="left: 50pt; top: 200pt;" width="100%" border="0">
              <table class="table table-striped table-bordered" style="text-align:center" width="100%" cellspacing="0" cellpadding="0">
                <thead>
                  <tr>
                    <td>Tipo de compromisos</td>
                    <td>Comprobante</td>
                    <td>Fecha y hora</td>
                    <td>Placa</td>
                    <td>Tipo de pago</td>
                    <td>Precio</td>
                    <td>Cantidad</td>
                    <td>Importe</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>

</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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