Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: overxfl0w13 en 4 Junio 2012, 14:45 pm



Título: Tabla Fija Con Scroll Html
Publicado por: overxfl0w13 en 4 Junio 2012, 14:45 pm
El problema visual es éste:

[img width="300" height="300"]http://www.subirimagenes.net/pictures/3c9a969b556a628b3ea9875a1a76e9ca.png[/img]

Tengo que situar una tabla centrada con un tamaño fijo y con scroll para que el texto no la redimensione.

He probado diversas maneras, pero a lo único que he llegado es a dejar fija la tabla y el texto a sobresalir por sus extremos.

¿ Alguna Idea ?

Gracias :)


Título: Re: Tabla Fija Con Scroll Html
Publicado por: #!drvy en 4 Junio 2012, 14:54 pm
Deja la tabla con un ancho fijo y centra la, luego para que no te sobresalga el texto puedes poner en el css de esta, la propiedad word-wrap:break-word; o puedes utilizar overflow:auto; para que agregue scroll cuando sea necesario.


Saludos


Título: Re: Tabla Fija Con Scroll Html
Publicado por: overxfl0w13 en 4 Junio 2012, 15:01 pm
Deja la tabla con un ancho fijo y centra la, luego para que no te sobresalga el texto puedes poner en el css de esta, la propiedad word-wrap:break-word; o puedes utilizar overflow:auto; para que agregue scroll cuando sea necesario.


Saludos

Muchas gracias drvy :D

Es raro, pero no hace nada :S. Lo más seguro es que tenga algún fallo en la declaración de la tabla, la llevo así:

Código
  1. <table width="600" name="codigo" style="background-color: #D8D8D8; table-layout: fixed; overflow: auto; word-wrap: break-word;">
  2. <tr>
  3. <td>
  4. <?php
  5. require_once("geshi/geshi.php");
  6. $ruta = "codigos/".$_POST["codingo"];
  7. $codigo = file_get_contents($ruta);
  8. $ges = new GeSHi($codigo, "c++");
  9. echo $ges->parse_code();
  10. ?>
  11. </tr>
  12. </td>

:)


Título: Re: Tabla Fija Con Scroll Html
Publicado por: #!drvy en 4 Junio 2012, 15:49 pm
Yep, no me fije que el overflow no se lleva bien ni con table ni con tr ni con td... xD
Así que improvisando... puedes añadir un div antes de la tabla y hacer algo así:

Código
  1. <div style="width:600px; background-color: #D8D8D8;  overflow:auto; word-wrap:break-word;">
  2. <table name="codigo" style="table-layout:fixed; width:100%;">
  3. <tr>
  4. <td>
  5. <?php
  6. require_once("geshi/geshi.php");
  7. $ruta = "codigos/".$_POST["codingo"];
  8. $codigo = file_get_contents($ruta);
  9. $ges = new GeSHi($codigo, "c++");
  10. echo $ges->parse_code();
  11. ?>
  12. </td>
  13. </tr>
  14. </div>

Recuerda que si combinas overflow con word-wrap.. prácticamente overflow queda solo de decoración, porque word-wrap rompe las palabras cuando lleguen al máximo de ancho y a no ser que definas un máximo de alto no se activa =).

Saludos


Título: Re: Tabla Fija Con Scroll Html
Publicado por: WHK en 4 Junio 2012, 16:11 pm
y si utilizas un margin: 0 auto; y un zoom adecuado al ancho total del html calculado con javascript y $(document).width() ?

Mira que entretenido está esto xD
Código
  1. $('body').css('-moz-transform', 'scale(' + ((($(window).width() * 100) / $(document).width()) / 100) + ')');
  2. $('body').css('-moz-transform-origin', 'left top');

Aunque se que no es lo que vas a utilizar, pero para centrarlo basta con poner margin 0 auto, además veo que la tabla está muy hacia el costado, quiere decir que la tienes encerrada en una división que tiene un padding o margin left, sacala de ahi y dejala sola en body y ponle el margin 0 auto, luego le das un ancho fijo, algo asi como unos 950px y su quieres un overflow entonces encierralo en una division con las mismas propiedades con un position relative y overflow auto, el relative es para que internet explorer no haga burradas.


Título: Re: Tabla Fija Con Scroll Html
Publicado por: overxfl0w13 en 4 Junio 2012, 20:16 pm
Muy buenos los dos, únicamente lo he hecho como me ha dicho drvy porque no me llevo yo muy bien con javascript ( de momento ) :D.

WHK la tabla estaba hacia el costado, porque el texto la redimensionaba, lla verdad es que ni me he fijado si le he puesto algún margin left, pero creo que no xD.

Gracias a los 2, de verdad :).

Por cierto, para fijar el alto que podría hacer? Tenía pensado ponerle un scroll lateral también y así fijar completamente la tabla en el centro con una anchura y altura determinada :)

EDIT: Conseguido, solo tenía que definir el height en el div, gracias a los 2 :D

Podéis pasaros por mi web cuando queráis y postear todo el código que os apetezca :)
Un saludo :)