0

La tabla está bien hace rato, pero decidí meterle un nuevo elemento, que es el id, la cosa es que al darle ver más e insertar nuevos elementos el witdh se incrementa, por qué pasa esto? y como solucionarlo si llego a meter mas campos y que no pase esto?

Antes de darle a ver más:

introducir la descripción de la imagen aquí

Después de darle a ver más:

introducir la descripción de la imagen aquí

No sé si se puede apreciar muy bien que está un poco más ancha la segunda imagen, es decir la tabla se alarga horizontalmente un poco más.

aqui les dejo el estilo y la estructura de esta:

vista:

<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%" />
                        <col width="10%" />
                    </colgroup>
                    <tr>
                        <td colspan="5">
                            <input v-model="product" @input="findproduct" placeholder="Search..." />
                            <a href="index.php"><button>Back</button></a>
                        </td>
                    </tr>
                    <tr>
                        <th>Id</th>
                        <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%"/>
                        <col width="10%" />
                    </colgroup>
                    <tr v-for="i in listFinishedproducts">
                        <td>{{i.id}}</td>
                        <td>{{i.name}}</td>
                        <td>{{i.lot}}</td>
                        <td>{{i.quantity_packed}}</td>
                        <td>{{i.pallet}}</td>
                    </tr>
                    <tr>
                        <td colspan="5"><a href="#" @click = "hola">{{message}}</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

css:

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

#table_container table {
    border-collapse: collapse;
    padding: 20px;
    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: 15%;
    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;
    word-break: break-word;
  
}

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

#table_container table:first-child {
    position: sticky;
    background-color:rgba(0, 149, 144);
    top: 0;
    
}


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

#table_container a {
    text-decoration: none;
    font-size: 20px;
    color: white;
    font-weight: bold;
}


#table_container a:hover {
    text-decoration: underline;
    text-decoration-color: white;
}

gracias :)

2

1 respuesta 1

0

Sin entrar en detalles, te sugiero utilizar las Developer Tools que tengas según el navegador web en cuestión; en muchos casos pulsas F12 y te aparece lo respectivo. Así puedes seleccionar un elemento de tus tablas, y rastrear cuál estilo es el que efectivamente está utilizando. Suele pasar que pensamos estar usando uno en particular, y resulta que es otro en realidad. Saludos

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.