Buenas.
Tengo un problemón con unas cuantas tablas que tengo que incluir en una web.
Os explico lo que tengo que hacer y como lo estoy haciendo: Tengo una tabla enorme llena de datos generada dinamicamente mediante PHP+MySQL, luego tengo un script con JQuery+Ajax que me permite editar los datos de la tabla en vivo. Básicamente lo que hace es esconder el texto que hay en la fila y sustituirlo por un formulario con los datos que estaban alli para que sean editados.
El problema llega precisamente aquí, cuando los "input" del formulario aparecen lo hacen con un tamaño determinado que en algunos casos difiere del tamaño de la celda, lo que resulta en el descuadre de la tabla... Normalmente no importaría, pero al ser una tabla con muchas filas al descuadrarse también hace moverse todas las filas hacia abajo haciendo desaparecer de la pantalla la fila en edicion y obligandote ha hacer un scroll para buscarla, lo cual no queda muy bien.
He intentado un buen montón de cosas jugando con los anchos de tabla, propiedades de filas y celdas, los input... Pero nada, no consigo que los input que aparezcan se cuadren con la celda... Lo ideal seria que cuando salga el input adquiera el ancho de esa celda, pero cualquier otra solución que no me descuadre la tabla seria buena.
Os pongo un código que "simula" muy burdamente lo que he explicado arriba, pero que ha grandes rasgos es lo que le pasa a mi otra tabla.
Código HTML:
<html>
<head>
<script type="text/jscript">
function formularioIN(){
document.getElementById("span1").style.display = 'none';
document.getElementById("span2").style.display = 'none';
document.getElementById("span3").style.display = 'none';
document.getElementById("span4").style.display = 'none';
document.getElementById("input1").style.display = 'block';
document.getElementById("input2").style.display = 'block';
document.getElementById("input3").style.display = 'block';
document.getElementById("input4").style.display = 'block';
}
function formularioOUT(){
document.getElementById("span1").style.display = 'inline';
document.getElementById("span2").style.display = 'inline';
document.getElementById("span3").style.display = 'inline';
document.getElementById("span4").style.display = 'inline';
document.getElementById("input1").style.display = 'none';
document.getElementById("input2").style.display = 'none';
document.getElementById("input3").style.display = 'none';
document.getElementById("input4").style.display = 'none';
}
</script>
<style type="text/css">
div{
width: 450px;
}
table{
width: 100%;
border-collapse:collapse;
}
.caja{
display:none;
width:100%;
padding: 0;
margin: 0;
}
</style>
</head>
<div>
<table border="1">
<thead>
<tr>
<th>IP</th>
<th>NETMASK</th>
<th>Gateway</th>
<th>Equipo</th>
</tr>
</thead>
<tbody>
<tr onmouseover="formularioIN()" onmouseout="formularioOUT()">
<td>
<span id="span1" class="text">192.168.1.10</span>
<input id="input1" class="caja" type="text" value="192.168.1.10" />
</td>
<td>
<span id="span2" class="text">255.255.255.0</span>
<input id="input2" class="caja" type="text" value="255.255.255.0" />
</td>
<td>
<span id="span3" class="text">192.168.1.254</span>
<input id="input3" class="caja" type="text" value="192.168.1.254" />
</td>
<td>
<span id="span4" class="text">Este es el equipo de Pepita</span>
<input id="input4" class="caja" type="text" value="Este es el equipo de Pepita" />
</td>
</tr>
<tr>
<td>192.168.1.11</td>
<td>255.255.255.0</td>
<td>192.168.1.254</td>
<td>Este es el equipo de Pepita</td>
</tr>
</tbody>
</table>
</div>
<body>
</body>
</html> Como podeis observar, la última columna de la tabla tiene un texto más largo de lo normal, pero cuando aparecen los inputs todas las columnas adquieren el mismo ancho y claro... Las filas adquieren un salto de linea, eso es lo que de alguna forma quiero evitar que pase.
Saludos y gracias por adelantado.