0
209
Vistaslos datos de la tabla html no llenan las columnas
Tengo una tabla html, estoy activando y desactivando la vista de la tabla conectando un botón a la siguiente secuencia de comandos:
function show() { if (document.getElementById("displaytable2").style.display === "none") { document.getElementById("displaytable2").style.display = "inline-block"; } else { document.getElementById("displaytable2").style.display = "none"; } } Estoy usando 'get skeleton' como placa de caldera para la mesa. En 'get skeleton' hay una clase que toma 12 columnas. Distribuye la tabla en 12 columnas. Cuando cargo el html, la tabla se distribuye en 12 filas (como se desee). Sin embargo, cuando hago clic en el botón para ocultar la tabla y vuelvo a hacer clic para mostrar la tabla, la tabla ya no ocupa 12 columnas.
Las 12 columnas están ocupadas por la tabla pero las únicas 3 de las columnas de las 12 muestran los datos.
Mi mesa:
<div class="row"> <table class="eleven columns" id="displaytable2" border="1px"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div>¿Cuál es la historia allí, cómo se puede arreglar eso? es como si los datos solo estuvieran completando la cantidad de columnas que tiene, en lugar de distribuir los datos en todas las columnas.
antes de hacer clic: 
después de hacer clic en volver a hacer clic:
1 Respuestas
Responde la pregunta0
Las columns y las eleven clases que ha usado en su tabla corresponden a columnas de cuadrícula, no a columnas de tabla. Deberían ir en un div.
Hay una clase para hacer que la tabla tenga el ancho completo de la cuadrícula y se llama u-full-width .
Su HTML debería verse así:
<div class="row"> <div class="eleven columns"> <table class="u-full-width" id="displaytable2" border="1px"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </div> </div>El primer div crea una fila, normalmente de longitud completa del contenedor principal.
El segundo div divide la fila en columnas, donde la clase eleven especifica que son 11 columnas dentro de una fila (el máximo posible es doce).
La clase de tabla, u-full-width , le permitirá a la tabla tomar todas las columnas disponibles, en este caso, las 11.
Además del punto aquí, también noté que configuraste la mesa para que sea un bloque después, lo que hace que la mesa se "encoja".
Debería usar: document.getElementById("displaytable2").style.display = "table"; Para devolver el comportamiento de la tabla .