Com fer que una taula es vegi sencera?

Com fer que una taula es vegi sencera?

per JAURES SANCHIS VILAPLANA -
Nombre de respostes: 4

Bones, 

he penjat tots els documents que necessitem des de secretaria per poder matricular als alumnes, ho he fet molt intuïtiu per a que sigui fàcil d'accedir-hi, però en trobo que quan fas click va a un submenú i al sortir l'històric de l'esquerra la taula es desplaça i no es veu sencera ni ho podem desplaçar. sabeu com puc fer que es vegi bé?, sigui quina sigui la resolució o tamany de la pantalla?

La nostra web és insbrugulat.cat, a la pàgina principal hi ha un carrussel on fent clic accediu a les taules que us dic.

Moltes gràcies per l'ajuda

En resposta a JAURES SANCHIS VILAPLANA

Re: Com fer que una taula es vegi sencera?

per Isabel Oussedik Vilalta (Equip tècnic d'Àgora) -

Bon dia Jaures,

Hem entrat a les quatre taules de matrícula i les veiem senceres (exemple Batxillerat).


Ens podeu enviar una captura de pantalla per veure com les visualitzeu vosaltres?

Salutacions,

Isabel

En resposta a Isabel Oussedik Vilalta (Equip tècnic d'Àgora)

Re: Com fer que una taula es vegi sencera?

per JAURES SANCHIS VILAPLANA -

Hola Isabel...et passo el que em demanes..val a dir que depen de quina pantalla es veu bé o malament..aquestes imatges que et passo és com es veu des de l'ipad

Tampoc puc veure el contingut que queda tallat a la dreta..podria desactivar el menú que queda a l'esquerra?..si introduim una taula quina mesura màxima hauriem de posar per a que es vegi bé en qualsevol dispositiu?

Gràcies21

En resposta a Isabel Oussedik Vilalta (Equip tècnic d'Àgora)

Re: Com fer que una taula es vegi sencera?

per FRANCESC BUSQUETS BURGUERA -

Hola!

És molt difícil (per no dir impossible) fer encaixar una taula com aquesta en la pantalla d'un dispositiu mòbil que pot tenir uns 350 píxels d'amplada en posició vertical.

El disseny responsiu d'Àgora-Nodes ja fa que s'amagui la columna lateral quan visualitzes la pàgina en una pantalla que fa menys de 768 píxels guanyant així una mica d'espai, però això no ho resol del tot perquè la vostra taula té una amplada de 950 píxels, i aquesta amplada està "clavada" al codi.

Dissenyar una taula totalment responsiva, que s'adapti a qualsevol amplada de pantalla sense perdre contingut, és molt complicat (sobretot quan té tantes columnes!). Aquí expliquen algunes tècniques que es poden aplicar, però jo us recomanaria fer una cosa molt senzilla i crec que prou efectiva per sortir del pas:

- Editeu el codi HTML de l'article

- Col·loqueu just abans de l'etiqueta "table" una etiqueta "div" amb l'estil "overflow:auto". Us ha de quedar així:

<div style="overflow:auto;">
<table style="width: 950px; height: 450px;">
.... aquí contina la definició de la taula...

- Afegiu l'etiqueta de tancament del "div" just darrere del tancament de "table":

... el contingut de la taula acaba aquí
</table>
</div>

Amb això aconseguireu que la taula llisqui a dreta i esquerra quan no hi hagi prou espai, facilitant així la seva lectura en tauletes i dispositius mòbils.

Espero que funcioni!


PS: Aquí podeu veure la taula amb lliscament horitzontal en dispositius mòbils:

https://drive.google.com/file/d/1yFxOeMSqzNNZul-JLnYnctVqFiEFS3ui/view?usp=sharing