elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Tabla Fija Con Scroll Html
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Tabla Fija Con Scroll Html  (Leído 8,390 veces)
overxfl0w13

Desconectado Desconectado

Mensajes: 163



Ver Perfil WWW
Tabla Fija Con Scroll Html
« 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 :)


« Última modificación: 4 Junio 2012, 15:01 pm por overxfl0w13 » En línea

[/url]
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Tabla Fija Con Scroll Html
« Respuesta #1 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


En línea

overxfl0w13

Desconectado Desconectado

Mensajes: 163



Ver Perfil WWW
Re: Tabla Fija Con Scroll Html
« Respuesta #2 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>

:)
« Última modificación: 4 Junio 2012, 15:27 pm por overxfl0w13 » En línea

[/url]
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Tabla Fija Con Scroll Html
« Respuesta #3 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
« Última modificación: 4 Junio 2012, 15:52 pm por drvy | BSM » En línea

WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.589


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: Tabla Fija Con Scroll Html
« Respuesta #4 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.
En línea

overxfl0w13

Desconectado Desconectado

Mensajes: 163



Ver Perfil WWW
Re: Tabla Fija Con Scroll Html
« Respuesta #5 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 :)
« Última modificación: 4 Junio 2012, 20:35 pm por overxfl0w13 » En línea

[/url]
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Organizar Tabla HTML
PHP
^Tifa^ 4 3,427 Último mensaje 26 Abril 2009, 22:44 pm
por дٳŦ٭
extraer html (tabla) con php
PHP
schumacher 2 4,195 Último mensaje 25 Mayo 2012, 07:37 am
por engel lex
python y tabla HTML
Scripting
Alfai 3 4,495 Último mensaje 17 Agosto 2009, 00:04 am
por Alfai
Duda sobre insersion a tabla html desde tabla sql
Bases de Datos
mokoMonster 2 3,957 Último mensaje 20 Febrero 2010, 01:20 am
por Shell Root
Insertar scroll lateral en tabla de Dreamweaver CS4
Desarrollo Web
sulloa 1 8,258 Último mensaje 13 Mayo 2011, 13:34 pm
por Spider-Net
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines