0

Me gustaría que me ayudaran dándome a conocer como puedo hacer que mi caja se haga flexible dependiendo del tamaño de la table que hay abajo, por ejemplo:

introducir la descripción de la imagen aquí

Código HTML:

<div class="Cajabts">
  <?php 
      $correo = $_SESSION['correo'];
      $consulta = "SELECT * FROM usuarios2 where Correo = '$correo'";
      $resultado = mysqli_query($conexion, $consulta);
      while($busqueda = mysqli_fetch_array($resultado)){
  ?>
  <div class="contenedortabla">

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Nombres</th>
          <th>Apellidos</th>
          <th>Correo</th>
        </tr>
      </thead>

      <tr>
        <td>
          <?php echo $busqueda['ID'];?>
        </td>
        <td>
          <?php echo $busqueda['Nombres'];?>
        </td>
        <td>
          <?php echo $busqueda['Apellidos'];?>
        </td>
        <td>
          <?php echo $busqueda['Correo'];?>
        </td>
      </tr>
    </table>
  </div>

  <input type="button" name="modificardatos" value = "Modificar 
      datos">
  <form method="POST" action="../PHP/subirfoto.php">
    <input type="submit" name = "cambiar-foto" value="Agregar o 
      modificar foto.">
    <input type="button" name="modificarcuenta" value = "Modificar 
      cuenta">

    <a href="../PHP/logout.php">
      <input type="button" name="cerrarsesion" value = "Cerrar 
       sesion">
    </a>

  </form>

  <!--BORRADO DE REGISTROS-->

  <form method="POST" action="../PHP/borrado.php">
    <input type="submit" value="Eliminar cuenta">
  </form>

</div>

Código CSS:

.Cajabts {
  width: 320px;
  height: 450px;
  background: rgb(255, 255, 255, 0.3);
  color: white;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border-radius: 5%;
  padding: 70px 30px;
  backdrop-filter: blur(20px);
  border: solid 1px rgba(255, 255, 255, 05);

}

table {
  margin-left: -3%;
  margin-top: -10%;
  margin-bottom: 10px;
  width: 100%;
  border-collapse: collapse;
  align-self: center;
}

th, td {
  border: solid 1px rgb(255, 255, 255);
  padding: 10px;
  color: black;
}

thead {
  background-color: rgba(199, 59, 157, 0.548);
  border-bottom: solid 1px rgba(158, 47, 125, 0.548);
  color: rgb(0, 0, 0);
}

Lo que me gustaria hacer es que la caja se ajuste automaticamente dependiendo la longitud de la tabla, porque como pueden ver en la imagen, la tabla sobresale de la caja. Muchas gracias de antemano.

2
  • ¡Bienvenido(a) a SOes!. Vendría mejor que especifiques más tu pregunta mostrando el código de tu problema y lo que estás intentado resolver a más detalle. Recuerda que puedes editar tu pregunta y adjuntarnos el código en su respectivo formato. Te recomiendo que visites el recorrido de bienvenida y mires cómo preguntar para que tus preguntas sean bien recibidas por la comunidad, ¡Saludos!. Estás usando bootstrap? css grid?... Commented el 1 oct. 2022 a las 2:19
  • 1
    Listo amigo, gracias por recordarme Commented el 1 oct. 2022 a las 2:26

1 respuesta 1

0

Podrías usar flexbox para lograr el mismo propósito de manera fácil, fijate en la clase .wrapper en el siguiente extracto de código:

/* estilos básicos, ignorar... */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

table tr td, table tr th {
  border: 1px solid #000;
}

table tr td {
  padding: .3rem .5rem;
}

.wrapper {
  /* se le da un height para que pueda centrar los elementos verticalmente */
  height: 100vh;
  /* centrar contenido horizontal y verticalmente  con flexbox: */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .container al estar dentro del flex wrapper comenzará a tomar un width 
   automático basado en su contenido (la tabla) y se centrará automáticamente
   gracias a las propiedades definidas arriba, logrando así el comportamiento 
   que esperas conseguir */
.container {
  background: #efefef;
  padding: .5rem;
  border: 1px solid #ccc;
}
<div class="wrapper">
  <div class="container">
    <table>
      <tr>
        <th>Test</th>
        <th>Test</th>
        <th>Test</th>
        <th>Test</th>
        <th>Test</th>
      </tr>
      <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
      </tr>
    </table>
  </div>
</div>

Tu Respuesta

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

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