Redimensionar tablas html

serdj · #1 (**permalink**) 01/12/2012, 05:54

Buenos días.
Este mensaje ya lo escribí en el foro pero no sé si lo han eliminado que no lo encuentro. Si lo repito, siento mucho lo que pueda ocasionar.
Mi duda es la siguiente. ¿Hay alguna manera de redimensionar una tabla HTML dependiendo del navegador con el que vayamos a abrir nuestra página web? Es que una tabla que tengo se ve bien en todos los navegadores excepto mozilla.

Muchas gracias.

emprear · #2 (**permalink**) 01/12/2012, 06:08

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
    alert('Firefox');
// código para redimensionar
 
}
//]]>
</script>

Salu2

IsaBelM · #3 (**permalink**) 01/12/2012, 07:28

mas que el navegador, creo que te refieres al área activa. ésta dependerá de la cantidad de barras que tenga el navegador. para conocer el área activa has de usar clientHeight. esto funcionará siempre y cuando la tabla no ocupe mas del 100% del alto

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CARATULAS DE PELÍCULAS</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

#bloque {
display: block;
width: 100%;
min-height: 100%;
height: auto !important;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {

alert(document.getElementById('bloque').clientHeig ht);

}
</script>
</head>
<body>

<div id="bloque">
aquí la tabla
</div>

</body>
</html>

furoya · #4 (**permalink**) 01/12/2012, 07:49

serdj : tenes 15 mensajes. No hay forma de no encontrar el tema.

redimensionar tablas dependiendo de navegador

Y no sé qué es peor, si levantarlo o repetirlo.

Más bien creo que hay un error en el código que nunca mostraste. La solución de emprear es lo que pediste. La de IsaBelM (que es código, aunque esté entre etiquetas de cita, y por eso no te va a funcionar en un copy&paste sin corregirlo primero) ... no sé muy bien a qué viene. Me parece que avisa si la tabla se sobrepasa de un límite. Es una interpretación (¿adivinación?) de tu -otra vez pobre- planteo.

IsaBelM · #5 (**permalink**) 01/12/2012, 07:57

Cita:

Iniciado por furoya

La de IsaBelM (que es código, aunque esté entre etiquetas de cita, y por eso no te va a funcionar en un copy&paste sin corregirlo primero) ... no sé muy bien a qué viene. Me parece que avisa si la tabla se sobrepasa de un límite. Es una interpretación (¿adivinación?) de tu -otra vez pobre- planteo.

así practica con la consola

no avisa de nada. te dice cuantos pixels tiene el 100% y arreglo a ello puedes redimensionar cualquier elemento

furoya · #6 (**permalink**) 01/12/2012, 13:27

Cita:

Iniciado por IsaBelM

así practica con la consola

Ah,sí, claro! Encima que posteás mal, ahora capaz que hay que darte las gracias.

Cita:

Iniciado por IsaBelM

no avisa de nada. te dice cuantos pixels tiene el 100% y arreglo a ello puedes redimensionar cualquier elemento

¿Cómo sabés que es un problema de corte de desborde en alto?. ¿Y si es en ancho?. ¿Y si es de filas o columnas por el tamaño de alguna celda?. ¿Y si es de desborde de contenido en las celdas porque no cabe?.

¿Mozilla hace alguna diferencia de tamaños con las tablas?

¿O será que se dejó el zoom sobredimensionado en ese navegador, y en los otros no?

emprear · #7 (**permalink**) 01/12/2012, 14:04

@furoya
me parece que a esta altura, y dada la capacidad e inteligencia de @isabelM, de la cual no me cabe duda alguna, creo que eso de

Cita:

código.....

Es solo para hacerte engranar. no encuentro otra explicación razonable

furoya · #8 (**permalink**) 02/12/2012, 07:57

Hay otras posibilidades. Como una limitación en el tiempo de uso de la máquina, o del ancho de banda, o su costo; también la mala configuración del teclado sin acceso al panel de control. O una combinación de varias.

Pero como ya discutimos alguna vez, la conocemos y sabemos que es una . . . nena caprichosa. [Nota: ¿la palabra "pendeja" en España también será un insulto?, en varios países de latinoamérica, sí; por eso trato de evitarla.]

Si reviento por un ataque de presión, lo llevará en su conciencia.

Cita:

Iniciado por IsaBelM

no avisa de nada.

No te das cuenta, porque el escribirlo entre etiquetas de cita te lo arruinó, pero

Código:

...
alert(document.getElementById('bloque').clientHeight);
...

es un aviso.

serdj · #9 (**permalink**) 02/12/2012, 09:30

Aun no he tenido tiempo de probarlo, pero la solución que me dio emprear es la que pensaba usar. Gracias. Ya os contaré.

PD la tabla se me redimensiona mal de ancho en Firefox.

furoya · #10 (**permalink**) 02/12/2012, 13:26

Lástima que nunca vamos a saber en qué circunstancias. Porque yo la probé, y me funciona igual en todos los browsers.

serdj · #11 (**permalink**) 04/12/2012, 12:16

Emprear, me he puesto a añadir tu script pero me surgen otras dudas. La tabla está en html (obviamente) pero no puedo meter html en el script. Las tablas están maquetadas con CSS, con archivos ya creados que en principio no puedo tocar. Entonces ¿habría otra forma? O con el script ¿cómo se haría?

Gracias.

emprear · #12 (**permalink**) 04/12/2012, 12:34

Cita:

Iniciado por serdj

Emprear, me he puesto a añadir tu script pero me surgen otras dudas. La tabla está en html (obviamente) pero no puedo meter html en el script. Las tablas están maquetadas con CSS, con archivos ya creados que en principio no puedo tocar. Entonces ¿habría otra forma? O con el script ¿cómo se haría?

Gracias.

No sé que es exactamente que es lo que estás intentando.
yo me limito a tu enunciado original, mi script lo único que hace es detectar si se está ejecutando el código bajo firefox o no. Por supuesto que podés escribir html dentro del javascript, ya sea con document.write o generando una tabla con createElement, y no debería más que redefinir el estilo para la propiedad height

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
table#uno{
height: 100px;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
document.write('<style>table#uno{height: 500px;}<\/style>');
}
//]]>
</script>
 
</head>
<body>
<table id="uno" border="1">
<tr><td>contenido</td></tr>
</table>
</body>
</html>

saludos

IsaBelM · #13 (**permalink**) 04/12/2012, 15:05

o más natural sería insertar la propiedad en línea

Cita:

document.getElementById('uno').style.height = '500px';

emprear · #14 (**permalink**) 04/12/2012, 15:41

Cita:

Iniciado por IsaBelM

o más natural sería insertar la propiedad en línea

no veo que tanto mas natural sin mencionar que deberiamos indicarle que realice el cambio onload
salu2

IsaBelM · #15 (**permalink**) 04/12/2012, 15:58

hay una diferencia entre general el selector entero únicamente por cambiar el valor de una propiedad

Cita:

a cambiar el valor de la propiedad en línea

Cita:

no es necesario usar el evento. como no está dentro de ninguna función, ejecutará allí donde lo pongamos

Cita:

<table id="uno" border="1">
<script type="text/javascript">
//<![CDATA[
if(navigator.userAgent.toLowerCase().indexOf('fire fox') > -1){
document.getElementById('uno').style.height = '500px';
}
//]]>
</script>
<tr><td>contenido</td></tr>
</table>

emprear · #16 (**permalink**) 04/12/2012, 18:14

Que me dijeses que cambiar la propiedad via
document.getElementById('uno').style.height = '500px';
es una alternativa posible, me parece perfecto, pero en cuanto a la "naturalidad" sigo discrepando.
Dentro del contexto de lo preguntado por @serdj, creo que mi método es apropiado, y si generalizamos y nos encontramos con que la identificación quizás se realice a través de clases ú otros selectores, o que los elementos a modificar sean varios más, es más simple.
Con respecto al onload, no me referí particularmente a un evento, sino a que la lectura de la tabla sea previa a la inserción de la script, cosa que hiciste, aunque por cierto vas a tener un problema para validar eso.
Y aqui una vez más comenzamos a intuir cosas, porque el usuario no las define por completo, no sería extraño que probase tu código poniendo (y simplifico)

Código HTML:

Ver original<html>
<head>
<link..... css>
<script>
</head>
<body>
<table>

y se apareciese una vez más por aquí diciendo que no le funciona.

como detalle final, tu script, tal cual está tampoco va a funcionar, y si, una vez más el viejo tema del code y el quote
if(navigator.userAgent.toLowerCase().indexOf('fire fox') > -1){
nótese el espacio entre fire y fox. A no ser, claro está, que continúes con tu campaña pro "uso de la consola" por parte de los más novatos.

Un saludo

IsaBelM · #17 (**permalink**) 05/12/2012, 06:30

"natural", "standar" da igual el término. para cambiar una propiedad css tenemos:
styleSheet (cambiamos el css embebido) o getElementById (cambiamos el css en línea). si apuramos incluso se puede usar querySelector y querySelectorAll

en cuanto a la validación, lo coloqué ahí a conciencia para mostrar que se ejecutará en "cualquier lado" que lo pongamos. evidentemente lo pondría justamente antes de </body>

lo del css externo, no he entendido donde quieres llegar. según la w3c, el css en línea tiene más importancia que el css embebido y, éste a su vez tiene más importancia que el css externo, siempre y cuando esté después de éste último

furoya · #18 (**permalink**) 05/12/2012, 11:27

Yo sospechaba algo así sobre tu concepto de "natural". No es que lo que dice emprear esté mal, pero es cierto que no queda prolijo.

Código:

<html>
<head>

<title>titulo</title> 

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">

/*<![CDATA[*/

table#uno{

height: 100px;

}

/*]]>*/

</style>

<script type="text/javascript">

//<![CDATA[

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){

document.write('<style>table#uno{height: 500px;}<\/style>');

}

//]]>

</script><style>table#uno{height: 500px;}</style>

</head>

<body>

<table id="uno" border="1">

<tbody><tr><td>contenido</td></tr>

</tbody></table>

</body>
</html>

Para salir del paso está perfecto, pero si lo queremos hacer "como corresponde", hay que modificar la hoja de estilo preexistente, o meterle el formato en línea.

Lo que no podés decir es que

Cita:

el css en línea tiene más importancia que el css embebido y, éste a su vez tiene más importancia que el css externo, siempre y cuando esté después de éste último

En verdad, la etiqueta de estilo incrustada en el documento (con todos los selectores adentro) y la etiqueta de estilo con un link al documento externo tienen la misma importancia, y lo único que les da la prioridad es su ubicación dentro del head.

Cuando tenés razón, tenés razón; pero tus vueltas dialécticas me darían vergüenza si fuese tu amigo.

Y tu código en etiquetas de cita, también.

emprear · #19 (**permalink**) 05/12/2012, 12:29

Cita:

Iniciado por IsaBelM

"natural", "standar" da igual el término. para cambiar una propiedad css tenemos:
styleSheet (cambiamos el css embebido) o getElementById (cambiamos el css en línea). si apuramos incluso se puede usar querySelector y querySelectorAll

en cuanto a la validación, lo coloqué ahí a conciencia para mostrar que se ejecutará en "cualquier lado" que lo pongamos. evidentemente lo pondría justamente antes de </body>

lo del css externo, no he entendido donde quieres llegar. según la w3c, el css en línea tiene más importancia que el css embebido y, éste a su vez tiene más importancia que el css externo, siempre y cuando esté después de éste último

Para mi lo que necesita es un equivalente a los condicionales para IE, y esa sigue siendo mi opción más práctica.
Css externo no mencioné ninguno. Y a la vista de que tu código puede ser analizado por otros usuarios, nada hubiese costado
<table>
.....
</table>
<script></script>
</body>

Finalmente, sigue habiendo un tema que ignoras, seguramente también a conciencia, y no termino de entender el por qué.

Saludos

IsaBelM · #20 (**permalink**) 05/12/2012, 15:04

Cita:

Iniciado por furoya

Para salir del paso está perfecto, pero si lo queremos hacer "como corresponde", hay que modificar la hoja de estilo preexistente, o meterle el formato en línea.

tu también lo ves??

Cita:

Iniciado por furoya

En verdad, la etiqueta de estilo incrustada en el documento (con todos los selectores adentro) y la etiqueta de estilo con un link al documento externo tienen la misma importancia, y lo único que les da la prioridad es su ubicación dentro del head.

tienes razón. cambio importancia por prioridad

Cita:

Iniciado por emprear

Para mi lo que necesita es un equivalente a los condicionales para IE, y esa sigue siendo mi opción más práctica.

las dos posturas ya las hemos dejado claras. no merece ahondar mas en ello

Cita:

Iniciado por emprear

Css externo no mencioné ninguno.

debe de ser algo que me he sacado de la manga

Cita:

Iniciado por emprear

Código HTML:

Ver original<html>
<head>
<link..... css>
<script>
</head>
<body>
<table>

Cita:

Iniciado por emprear

Y a la vista de que tu código puede ser analizado por otros usuarios, nada hubiese costado
<table>
.....
</table>
<script></script>
</body>

ya expliqué por qué lo hice

Cita:

Iniciado por emprear

Finalmente, sigue habiendo un tema que ignoras, seguramente también a conciencia, y no termino de entender el por qué.

como dijo aquel "tu también, emprear??"

emprear · #21 (**permalink**) 05/12/2012, 19:19

Por supuesto que yo también, y cualquiera que tenga dos dedos de frente.
Puede que tengas razón respecto a un planteo sobre javascript, pero a esta altura desdibujar lo que pudiera ser un muy buen código de tu parte, y desde ya que no me limito a este tema, sino a las decenas o cientos de post en que no hemos cruzado (si vieses la cantidad que corregi para poder probar sin hacer mención del asunto anteriormente), con la manía cuasi caprichosa del quote para tus códigos, no tiene justificación alguna.
Y otra vez, no termino de entender porque todo lo llevás al terreno ese de que si uno está con el otro o el otro con uno. Para mí esto es un Foro de informática, en dónde vengo a enseñar lo poco que sé ( a veces con errores) y aprender lo mucho que no, jamás he hecho de esto una competencia donde satisfacer mi ego
Si mañana Hitler sale de la tumba y me dice que 2+2 es cuatro, le diré, "Asi es señor , Ud. tiene razón", y si por eso querés tildarme de Nazi, allá vos, es tu prerrogativa

IsaBelM · #22 (**permalink**) 06/12/2012, 07:33

Cita:

Iniciado por emprear

Y otra vez, no termino de entender porque todo lo llevás al terreno ese de que si uno está con el otro o el otro con uno.

me habría gustado que hubieras apoyado esta afirmación con pruebas. pocas veces lo habré hecho, por no decir que esta sea la primera vez.
como ya nos conocemos, sabes que no necesito que nadie me apoye para seguir en mis trece. eso no quita para dar mi brazo a torcer, cuando he cometido un error

Cita:

Iniciado por emprear

Para mí esto es un Foro de informática, en dónde vengo a enseñar lo poco que sé ( a veces con errores) y aprender lo mucho que no, jamás he hecho de esto una competencia donde satisfacer mi ego

confundes competencia (no compito contigo puesto que tengo todas las de perder), con mostrar otra manera de hacerlo. éste es un foro didáctico y como tal, cada uno intenta en la medida que le permite sus conocimientos aportar. pero no tengas la sensación de manía persecutoria o de estar en competencia contigo. mi egocentrismo lo satisfago en otros ámbitos

Cita:

Iniciado por emprear

Si mañana Hitler sale de la tumba y me dice que 2+2 es cuatro, le diré, "Asi es señor , Ud. tiene razón", y si por eso querés tildarme de Nazi, allá vos, es tu prerrogativa

me remito a lo anteriormente dicho y apostillo; me da igual que seas tú o cualquier otro. si 2+2 son 4, no pretenderé que digas que son 5.
esto me ha recordado a winston smith (1984)

emprear · #23 (**permalink**) 06/12/2012, 08:16

No pierdas el contexto Isabel, tu "tú también?" sabemos exactamente lo que representa. Presentá tu código como te plazca.