I am making two tables to be able to show the results, but since there would be many I thought of putting it in one scroll
so that it can be slid.
Now the problem is that the styles of the two tables are the same, only that the cells of the second table are not at the same distance as the first table, how could I fix that?
#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>
How do I make the cells in the second table the same size as the first table?
In addition to the fact that scroll
he looks very far away due to the width
, how could he solve that?
Thank you :)
The problem in the
tabla2
was that the content of thetd
took up more space than the content ofth
the firsttabla
, that is, it overflowedtd
as it did not have a cell width equal to theth
, since your firsttabla
and all cells had awidth: 20%;
.For this case I used only one table with a
width
limit to the width of theth
:I suppose that you have used two tables to dynamically add the content of what was the
tabla2
, being so you can add it dynamically just by adding another row:You could make the following changes:
scroll
colgroup
)Example:
PS: You have to delete the ones
tr
in the second table that don't have the directives.You could use a single table to display the results:
And instead of loading the results in a scroll, I would instead add a pagination system that would show, for example, 10 or 20 results and avoid unnecessary loading.