Tablas e INPUTs, tamaño automático

noruas · #1 (**permalink**) 13/04/2013, 15:03

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.

pzin · #2 (**permalink**) 13/04/2013, 15:07

¿Probaste por medio de CSS a darle un ancho de 100% a los campos del formulario?

noruas · #3 (**permalink**) 13/04/2013, 16:31

Si, fue de las primeras cosas que probé :P, pero nada

pzin · #4 (**permalink**) 13/04/2013, 17:02

Vale, no miré el código.

Si a la tabla le añades:

Código CSS:

Ver originaltable-layout: fixed;

Debería de quedarse fijo.

noruas · #5 (**permalink**) 14/04/2013, 04:11

Si, pero el problema de esa propiedad es que tendria que ir seleccionando columna a columna y asignarle un ancho fijo... Puede servir, pero si a alguien se le ocurre una forma de que la tabla siga conservando sus propiedades dinamicas en funcion de su contenido soy todo oidos :P

EDITO: Pues he conseguido lo que buscaba con Jscript, primero tomo el ancho de la columna y antes de mostrar los inputs les doy el ancho que tiene esa columna... Funciona, pero ya que andamos trasteando con tablas, me gustaria saber si hay alguna forma de hacer esto solo con CSS

Se supone que cuando a un elemento se le da la propiedad de ancho 100% toma su ancho de su elemento padre, en este caso la celda... No entiendo por que en una tabla no lo hace si no se le da la propiedad "table-layout: fixed;", se supone que un "td" es un elemento de bloque...

EDITO 2: Pues he encontrado otro método, meter los input dentro de los spans y luego usar estos estilos:

Código CSS:

Ver originalspan{
    position: relative;
    z-index:0;
}
.caja{
    display:none;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

Pero el problema es que meter los input dentro de los spans puede suponerme un verdadero problema con el script que uso en la web... A ver si a alguien se le ocurre otra solución :P