2

Estoy haciendo dos tablas para poder mostrar los resultados, pero como serian muchos pensé en meterlo en un scroll para que se pueda ir deslizando.

Ahora el problema es que los estilos de las dos tablas son iguales, solo que las celdas de la segunda tabla no quedan a la misma distancia que la primera tabla, como pudiera arreglar eso?

enter image description here

#prueba {
  border-collapse: collapse;
  padding: 5px;
}

#prueba tr,
th,
td {
  border: 1px solid black;
  width: 20%;
  padding: 5px;
}

#prueba td {
  text-align: center;
}

#prueba2 {
  border-collapse: collapse;
  padding: 5px;
}

#prueba2 td {
  border: 1px solid black;
  width: -20%;
  padding: 5px;
}

#container {
  height: 200px;
  overflow: auto;
  overflow-y: scroll;
}
<table id="prueba">
  <tr>
    <td colspan="4">
      <input v-model="product" @input="findproduct" placeholder="Search by name"></input>
      <a href="index.php"><button>Back</button></a>
    </td>
    <tr>
      <th>Name:</th>
      <th>Lot:</th>
      <th>Quantity packed</th>
      <th>Quantity of pallets</th>
    </tr>
  </tr>
</table>
<div id="container">
  <table id="prueba2">
    <tr v-for="i in listFinishedproducts">
      <td>{{i.name}}</td>
      <td>{{i.lot}}</td>
      <td>{{i.quantity_packed}}</td>
      <td>{{i.pallet}}</td>
    </tr>
  </table>
</div>

¿Como hago para que las celdas de la segunda tabla sean del mismo tamaño que la primera tabla?

Ademas que el scroll se ve muy alejado debido al width, ¿como pudiera solucionar eso?

Gracias :)

3
  • Necesita utilizar dos tablas o le sería útil usar solamente una ? Para saber que ejemplo proporcionarle
    – Israel
    el 15 jun. 2020 a las 12:52
  • ¿No te interesa una solución con Javascript? ¿Sabes que podes indicar el ancho a cada columna?
    – Marcos
    el 15 jun. 2020 a las 13:28
  • si, pero no se como implementarlo mediante vuejs o js
    – plus
    el 15 jun. 2020 a las 13:33

3 respuestas 3

1

Podrías hacer los siguientes cambios:

  • Meter en un contenedor ambas tablas y que dicho contenedor sea el que tenga el scroll
  • La primer tabla la dejas fija (position: sticky) y con ancho de columnas pre-establecidos
  • La segunda tabla tiene los mismos anchos de columnas (copiar colgroup)

Ejemplo:

#container {
  height: 200px;
  overflow: auto;
  overflow-y: scroll;
  position: relative;
}

#container table {
  border-collapse: collapse;
  padding: 5px;
  background-color: #fff;
  width: 100%;
}

#container table th,
#container table td {
  border: 1px solid black;
  padding: 5px;
  word-break: break-word;
}

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

#container table:first-child {
  position: sticky;
  top: 0;
}
<div id="container">
  <table>
    <colgroup>
      <col>
      <col width="10%" />
      <col width="15%" />
      <col width="20%" />
    </colgroup>
    <tr>
      <td colspan="4">
        <input v-model="product" @input="findproduct" placeholder="Search by name" />
        <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>
    <colgroup>
      <col>
      <col width="10%" />
      <col width="15%" />
      <col width="20%" />
    </colgroup>
    <tr v-for="i in listFinishedproducts">
      <td>{{i.name}}</td>
      <td>{{i.lot}}</td>
      <td>{{i.quantity_packed}}</td>
      <td>{{i.pallet}}</td>
    </tr>
    <tr>
      <td>Algomuylargoquepuedadeformar</td>
      <td>158877789</td>
      <td>1254522215</td>
      <td>151654648989</td>
    </tr>
    <tr>
      <td>Algomuylargoquepuedadeformar</td>
      <td>158877789</td>
      <td>1254522215</td>
      <td>151654648989</td>
    </tr>
    <tr>
      <td>Algomuylargoquepuedadeformar</td>
      <td>158877789123123123</td>
      <td>1254522215123123</td>
      <td>151654648989qweqwe</td>
    </tr>
    <tr>
      <td>Algomuylargoquepuedadeformar</td>
      <td>158877789</td>
      <td>1254522215</td>
      <td>151654648989</td>
    </tr>
  </table>
</div>

PD: Tenes que borrar los tr de la segunda tabla que no tienen las directivas.

2
  • para que son los coolgroup?
    – plus
    el 15 jun. 2020 a las 14:11
  • @plus, he actualizado mi respuesta agregando referencias a los elementos utilizados.
    – Marcos
    el 15 jun. 2020 a las 14:13
1

Podría usar una única tabla para mostrar los resultados:

#prueba {
border-collapse: collapse;
padding: 5px;
}

#prueba tr, th, td {
border:1px solid black;
width: 20%;
padding: 5px;
}

#prueba td {
text-align: center;
}

#container {
height: 200px;
overflow: auto;
overflow-y: scroll;
}
<table id="prueba">
    <thead>
        <tr>
          <td colspan="4">
            <input v-model="product" @input="findproduct" placeholder="Search by name"/>
            <a href="index.php"><button>BackBack</button></a>
          </td>
          <tr>
            <th>Name:</th>
            <th>Lot:</th>
            <th>Quantity packed</th>
            <th>Quantity of pallets</th>
          </tr>
        </tr>
    </thead>
    <tbody>
        <tr v-for="i in listFinishedproducts">
          <td>{{i.name}}</td>
          <td>{{i.lot}}</td>
          <td>{{i.quantity_packed}}</td>
          <td>{{i.pallet}}</td>
        </tr>
        
        
    </tbody>
    
</table>

Y en vez de cargar los resultados en un scroll, en su lugar agregaría un sistema de paginación que mostrase por ejemplo 10 o 20 resultados y evitar la carga innecesaria.

2
  • muy bueno, pero como hago para que al hacer scroll solo baje la parte donde muestra los resultados, es decir que la barra de busqueda y los th se queden estaticos, los unicos que van a a hacer scroll seran los resultados
    – plus
    el 15 jun. 2020 a las 14:02
  • Si necesitas scroll imperativamente, la respuesta de @Marcos es la mas acertada
    – Israel
    el 15 jun. 2020 a las 14:04
1

El problema en la tabla2 era que el contenido de los td ocupaba mas espacio que el contenido de los th de la primera tabla, es decir, desbordaba los td al no tener un ancho de celdas igual a los th, dado que tu primera tabla y todas las celdas tenían un width: 20%;.

Para este caso usé solo una tabla con un width limitado al ancho de los th:

<div id="container">
    <table id="prueba">
        <tr>
            <td colspan="4">
                <input v-model="product" @input="findproduct" placeholder="Search by name"></input>
                <a href="index.php"><button>Back</button></a>
            </td>
            <tr>
                <th>Name:</th>
                <th>Lot:</th> 
                <th>Quantity packed</th>
                <th>Quantity of pallets</th>
            </tr>
            <tr>
                <td>{{i.name}}</td>
                <td>{{i.lot}}</td>
                <td>{{i.quantity_packed}}</td>
                <td>{{i.pallet}}</td>
            </tr>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tr>
    </table>
</div>   


#container {
    width: 50%;
    padding: 5px;
    overflow: auto;
    overflow-y: scroll;
}

#prueba {
    width: 100%;
    border:1px solid black;
    text-align: center;
    border-collapse: collapse;
}

tr, th, td{
    border:1px solid black;
}

Supongo que habrás usado dos tablas para agregar dinamicamente el contenido de lo que era la tabla2, siendo así lo podrás agregar dinamicamente solo con agregar otra fila:

<tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
</tr>
4
  • #container donde iria? cerrando toda la tabla o solamente encerrando donde hago el ciclo for para imprimir los resultados?
    – plus
    el 15 jun. 2020 a las 13:35
  • Opps, olvide agregar el container . En ese caso la tabla va dentro de container
    – Nick Cam
    el 15 jun. 2020 a las 13:40
  • amigo, lo he hice pero no da resultado xD, lo unico que me falta seria establecer los estilos de la segunda tabla para que quede igual el ancho que la primera, y asi poder hacer scroll
    – plus
    el 15 jun. 2020 a las 13:48
  • Que raro, a mi me está dando. Revisa el código nuevamente, lo edité para el formato del contenedor.
    – Nick Cam
    el 15 jun. 2020 a las 13:52

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.