2

Estoy imprimiendo resultados en la tabla de 5 en 5, a la hora de darle a ver mas este agrega 5 mas, pero no los agrega del mismo tamaño como estaba inicialmente, como pudiera hacerlo?

introducir la descripción de la imagen aquí

Así esta antes de darle a ver mas, ahora cuando le doy a ver mas:

introducir la descripción de la imagen aquí

¿Como puedo hacer para que cuando muestre los 5 mas los muestre del mismo tamaño como estaba originalmente?

Aquí les dejo mi código:

#finished_products {
  text-align: center;
}

#finished_products_table {
  margin-top: 150px;
  height: 400px;
  display: inline-block;
  border: 8px groove #72d3c6;
  border-radius: 4px;
}

#table_container {
  display: inline-block;
  height: 200px;
  overflow: auto;
  overflow-y: scroll;
  height: 384px;
}

#table_container table {
  border-collapse: collapse;
  padding: 5px;
  background-color: rgba(0, 149, 144, 0.8);
  width: 100%;
}

#table_container table input {
  width: 50%;
  border: 2px solid #8cdbd7;
  border-radius: 4px;
  padding: 5px;
  font-size: 20px;
}

#table_container table button {
  max-width: 5%;
  padding: 5px;
  font-size: 20px;
  border: 2px solid #8cdbd7;
  border-radius: 4px;
  background-color: #69E9E2;
  cursor: pointer;
}

#table_container table th,
#table_container table td {
  border: 1px solid black;
  padding: 2px;
  word-break: break-word;
  font-size: 20px;
}

#table_container table td {
  text-align: center;
}

#table_container table:first-child {
  position: sticky;
  background-color: rgba(0, 149, 144);
  top: 0;
}
<div id="finished_products">
  <div id="finished_products_table">
    <div id="table_container">
      <table>
        <colgroup>
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
        </colgroup>
        <tr>
          <td colspan="4">
            <input v-model="product" @input="findproduct" placeholder="Search..." />
            <a href="index.php"><button>Back</button></a>
          </td>
        </tr>
        <tr>
          <th>Name:</th>
          <th>Lot:</th>
          <th>Quantity packed</th>
          <th>Quantity of pallets</th>
        </tr>
      </table>
      <table id="products_table">
        <colgroup>
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
        </colgroup>
        <tr v-for="i in listFinishedproducts">
          <td>{{i.id}}</td>
          <td>{{i.lot}}</td>
          <td>{{i.quantity_packed}}</td>
          <td>{{i.pallet}}</td>
        </tr>
        <tr>
          <td colspan="4"><a href="#" @click="hola">hola</a></td>
        </tr>
      </table>
    </div>
  </div>
</div>

3
  • Creo que ocupas hacer uso de Javascript, ocupas darle funcionalidad a tu página.
    – user166844
    el 16 jun. 2020 a las 10:15
  • Podrías editar tu pregunta y agregar un ejemplo mínimo verificable
    – Marcos
    el 16 jun. 2020 a las 12:45
  • Creo que el problema es que cuando llegan mas registros el html trata de ajustar el contenido al tamaño del contendor, lo que debes hacer es cuando lleguen los resultados, por js modificas el css y le aumentas el tamaño
    – srJJ
    el 16 jun. 2020 a las 12:58

1 respuesta 1

0

tienes fijada la altura de tu table_container, intenta con height: auto, de esta manera se ajustara automaticamente a tu contenido

#finished_products {
  text-align: center;
}

#finished_products_table {
  margin-top: 150px;
  height: auto;
  display: inline-block;
  border: 8px groove #72d3c6;
  border-radius: 4px;
}

#table_container {
  display: inline-block;
  height: auto;
  overflow: auto;
  overflow-y: scroll;
  height: auto;
}

#table_container table {
  border-collapse: collapse;
  padding: 5px;
  background-color: rgba(0, 149, 144, 0.8);
  width: 100%;
}

#table_container table input {
  width: 50%;
  border: 2px solid #8cdbd7;
  border-radius: 4px;
  padding: 5px;
  font-size: 20px;
}

#table_container table button {
  max-width: 5%;
  padding: 5px;
  font-size: 20px;
  border: 2px solid #8cdbd7;
  border-radius: 4px;
  background-color: #69E9E2;
  cursor: pointer;
}

#table_container table th,
#table_container table td {
  border: 1px solid black;
  padding: 2px;
  word-break: break-word;
  font-size: 20px;
}

#table_container table td {
  text-align: center;
}

#table_container table:first-child {
  position: sticky;
  background-color: rgba(0, 149, 144);
  top: 0;
}
<div id="finished_products">
  <div id="finished_products_table">
    <div id="table_container">
      <table>
        <colgroup>
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
        </colgroup>
        <tr>
          <td colspan="4">
            <input v-model="product" @input="findproduct" placeholder="Search..." />
            <a href="index.php"><button>Back</button></a>
          </td>
        </tr>
        <tr>
          <th>Name:</th>
          <th>Lot:</th>
          <th>Quantity packed</th>
          <th>Quantity of pallets</th>
        </tr>
      </table>
      <table id="products_table">
        <colgroup>
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
          <col width="10%" />
        </colgroup>
        <tr v-for="i in listFinishedproducts">
          <td>{{i.id}}</td>
          <td>{{i.lot}}</td>
          <td>{{i.quantity_packed}}</td>
          <td>{{i.pallet}}</td>
        </tr>
        <tr>
          <td colspan="4"><a href="#" @click="hola">hola</a></td>
        </tr>
      </table>
    </div>
  </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.