Mobilvenlige tabeller

[Kurt Hansen]

Ja, jeg ved det godt, men pleeeease ... ikke flere kritiske kommentarer
om denne gamle hjemmeside.

Nu er jeg igen-igen på banen og vil igen-igen lave en helt ny side, men
det bliver i et hosted system, som f.eks. SmartWeb.

Jeg vil sådan set bare gerne vide hvordan man laver en tabel med fire
kolonner. Eksempel: https://www.danacord.dk/frmsets/records/839-r.html

Kolonne 3 skal wrappe teksten når det er nødvendigt, men det må de tre
andre ikke. Det skulle vel ikke være så svært, eller ...?

[Dennis Munding]

Post by Kurt Hansen
Ja, jeg ved det godt, men pleeeease ... ikke flere kritiske
kommentarer om denne gamle hjemmeside.
Nu er jeg igen-igen på banen og vil igen-igen lave en helt ny side,
men det bliver i et hosted system, som f.eks. SmartWeb.
Jeg vil sådan set bare gerne vide hvordan man laver en tabel med fire
kolonner. Eksempel: https://www.danacord.dk/frmsets/records/839-r.html
Kolonne 3 skal wrappe teksten når det er nødvendigt, men det må de
tre andre ikke. Det skulle vel ikke være så svært, eller ...?

Giv den ønskede kolonne en class og styr det med css:

<td>1. kolonne...</td>
<td class="wordwrap">Anden kolonne med et laaaaaaaaaaaaaaaaaaaangt
ord...</td>
<td>...</td>

CSS:

.wordwrap {word-wrap: break-word;}

Link til w3schools:
https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

[Jan Hansen]

Post by Kurt Hansen
Kolonne 3 skal wrappe teksten når det er nødvendigt, men det må de tre
andre ikke. Det skulle vel ikke være så svært, eller ...?

Giv tabellen en klasse, <table class="bbb">, og indsæt følgende css:

<style>
.bbb tr td {white-space: nowrap;}
.bbb tr td:nth-child(3) {white-space: normal;}
</style>

[Jan Hansen]

Post by Jan Hansen
<style>
.bbb tr td {white-space: nowrap;}
.bbb tr td:nth-child(3) {white-space: normal;}
</style>

Og hvis du også vil have nogle links:
<https://www.w3schools.com/cssref/sel_nth-child.asp>
og
<https://www.w3schools.com/cssref/pr_text_white-space.asp>

Jeg kan nu ikke lige se, hvor "mobilvenlighed" kommer ind,
men hvis det er noget, du går højt op i, burde du spare
sammen til en, og se efter hvad det er for noget. På sådan
en dims kan man zoome ud ved at sætte to fingre diagonalt
på skærmen, og bevæge fingrene imod hinanden. Tilsvarende
kan man zoome ind. Brugeren har dermed mulighed for at se
den eksisterende side, nøjagtig, som han måtte ønske!!!

Det sket tit, at jeg går ind på en side, og ved at trække i
browservinduet forsøger at indstille linielængden til noget,
jeg finder læsevenligt. Hvis linielængden så ikke forandres,
og elementerne i stedet begynder at hoppe rundt på skærmen,
har jeg tendens til at søge efter de samme oplysninger på
en side, der er mindre kvajet klasket sammen.

[Dennis Munding]

Post by Jan Hansen

Post by Jan Hansen
<style>
.bbb tr td {white-space: nowrap;}
.bbb tr td:nth-child(3) {white-space: normal;}
</style>

<https://www.w3schools.com/cssref/sel_nth-child.asp>
og
<https://www.w3schools.com/cssref/pr_text_white-space.asp>
Jeg kan nu ikke lige se, hvor "mobilvenlighed" kommer ind,
men hvis det er noget, du går højt op i, burde du spare
sammen til en, og se efter hvad det er for noget. På sådan
en dims kan man zoome ud ved at sætte to fingre diagonalt
på skærmen, og bevæge fingrene imod hinanden. Tilsvarende
kan man zoome ind. Brugeren har dermed mulighed for at se
den eksisterende side, nøjagtig, som han måtte ønske!!!
Det sket tit, at jeg går ind på en side, og ved at trække i
browservinduet forsøger at indstille linielængden til noget,
jeg finder læsevenligt. Hvis linielængden så ikke forandres,
og elementerne i stedet begynder at hoppe rundt på skærmen,
har jeg tendens til at søge efter de samme oplysninger på
en side, der er mindre kvajet klasket sammen.

Man kan også - i Firefox - benytte tastekombinationen CTRL+SHIFT+M.
Så får man vist siden i "mobil format", som oveni købet kan tilpasses
forskellige mobile enheder - eller blot efter eget ønske.

En funktion jeg ofte benytter, når jeg "strikker" en hjemmeside
sammen... :-)

[Kim Ludvigsen]

Post by Dennis Munding
Man kan også - i Firefox - benytte tastekombinationen CTRL+SHIFT+M.
Så får man vist siden i "mobil format", som oveni købet kan tilpasses
forskellige mobile enheder - eller blot efter eget ønske.

Hvis det blot er for at få en mere læsevenlig side som besøgende, kan
man i stedet bruge læsevisning i Firefox: Ctrl+Alt+R (eller klik på
ikonen i adressefeltet). Det er især brugbart til sider, som ikke
angiver en max-bredde for tekst, som fx Wikipedia.

[Jan Hansen]

Post by Dennis Munding
Man kan også - i Firefox - benytte tastekombinationen CTRL+SHIFT+M.
Så får man vist siden i "mobil format", som oveni købet kan tilpasses
forskellige mobile enheder - eller blot efter eget ønske.
En funktion jeg ofte benytter, når jeg "strikker" en hjemmeside
sammen... :-)

Så laver du nok ikke sider med frames... Når jeg prøver ser det ud som
om, at den røde menu i venstre side er klistret fast, og absolut skal
fylde halvdelen af skærmen. Sådan fungerer det jo slet ikke i
virkeligheden. Hvis siden er for bred til skærmen, er det bare at
køre fingeren hen over skærmen, så glider menuen ud til venstre. Med 2
fingre er det så til at zoome ud og ind, så man enten kan se hele
siden, eller zoome ind på listen over numre.
<https://imgur.com/a/F06YJ55>

[Dennis Munding]

Post by Jan Hansen

Post by Dennis Munding
Man kan også - i Firefox - benytte tastekombinationen CTRL+SHIFT+M.
Så får man vist siden i "mobil format", som oveni købet kan
tilpasses forskellige mobile enheder - eller blot efter eget ønske.
En funktion jeg ofte benytter, når jeg "strikker" en hjemmeside
sammen... :-)

Så laver du nok ikke sider med frames...

Nej - det blev jeg (heldigvis) vænnet af med ret hurtigt for mange år
siden, takket være en masse venlige sjæle her i grupperne... ;-)

[Bertel Lund Hansen]

Dennis Munding skrev:

[om frames]

Post by Dennis Munding
Nej - det blev jeg (heldigvis) vænnet af med ret hurtigt for mange år
siden, takket være en masse venlige sjæle her i grupperne... ;-)

Jeg har heldigvis glemt alt om hvordan man gør.

[Kurt Hansen]

Post by Kurt Hansen
Ja, jeg ved det godt, men pleeeease ... ikke flere kritiske kommentarer
om denne gamle hjemmeside.
Nu er jeg igen-igen på banen og vil igen-igen lave en helt ny side, men
det bliver i et hosted system, som f.eks. SmartWeb.
Jeg vil sådan set bare gerne vide hvordan man laver en tabel med fire
kolonner. Eksempel: https://www.danacord.dk/frmsets/records/839-r.html
Kolonne 3 skal wrappe teksten når det er nødvendigt, men det må de tre
andre ikke. Det skulle vel ikke være så svært, eller ...?

Det slår mig lige: På en mobilvenlig side kan jeg vel ikke have en
lodret menu i venstre side?

[Kim Ludvigsen]

Post by Kurt Hansen
Det slår mig lige: På en mobilvenlig side kan jeg vel ikke have en
lodret menu i venstre side?

Det kan du sådan set godt, men den tager jo en del plads fra det, som de
besøgende er mere interesserede i. Du kan evt. overveje en sammenklappet
menu, der blot vises som en knap med tre streger eller prikker, og som
så foldes ud med et tryk.

Prøv at tjekke, den jeg har her:
https://rejse-til-thailand.dk/wai

Du kan tilpasse browservinduet eller i Firefox bruge genvejen
Ctrl+Skift+M, som Dennis nævnte, så du kan se mobiludgaven.

Hm, jeg kan se, at jeg ikke har fået placeret min knap korrekt, men du
kan se ideen med den.

[Henning]

Post by Kim Ludvigsen

Post by Kurt Hansen
Det slår mig lige: På en mobilvenlig side kan jeg vel ikke have en
lodret menu i venstre side?

Det kan du sådan set godt, men den tager jo en del plads fra det, som de
besøgende er mere interesserede i. Du kan evt. overveje en sammenklappet
menu, der blot vises som en knap med tre streger eller prikker, og som
så foldes ud med et tryk.

w3schools har en del forskellige templates, du kan kigge på:

https://www.w3schools.com/w3css/w3css_templates.asp

[Jan Hansen]

Post by Kurt Hansen
Kolonne 3 skal wrappe teksten når det er nødvendigt, men det må de tre
andre ikke. Det skulle vel ikke være så svært, eller ...?

En mere simpel udgave:

Giv tabellen en klasse, <table class="bbb">, og indsæt følgende css:

<style>
.bbb tr td:not(:nth-child(3)) {white-space: nowrap;}
</style>

[Kurt Hansen]

Post by Kurt Hansen
Ja, jeg ved det godt, men pleeeease ... ikke flere kritiske kommentarer
om denne gamle hjemmeside.
Nu er jeg igen-igen på banen og vil igen-igen lave en helt ny side, men
det bliver i et hosted system, som f.eks. SmartWeb.
Jeg vil sådan set bare gerne vide hvordan man laver en tabel med fire
kolonner. Eksempel: https://www.danacord.dk/frmsets/records/839-r.html
Kolonne 3 skal wrappe teksten når det er nødvendigt, men det må de tre
andre ikke. Det skulle vel ikke være så svært, eller ...?

Tak for de mange gode løsningsforslag; det ser jo ikke så svært ud, men
jeg har besluttet at jeg ALDRIG mere vil håndkode.

Et færdigbagt system, som f.eks. SmartWeb, har mange muligheder for
design og strukturering, men grundlæggende kan jeg kun med besvær ændre
på "systemet" og hvis jeg gør, så er det slut med support på det jeg har
ændret i.

Mit ærinde er derfor udelukkende at lave responsive varesider. En
webshop i SmartWeb er i sig selv allerede responsive.