Hvorfor varierer rammen rundt en tabell med skjermoppløsningen?

[Mastiff]

Jeg har en dynamisk tabell med data som kommer fra webserveren (automatiseringsprogrammet Girder), og av en eller annen grunn vil ikke rammen oppføre seg. Hvis jeg ikke setter en fast pixelbredde eller prosentbredde på tabellen i CSS, havner høyre side av rammen langt utenfor tabellen (kanskje 1/3 av tabellbredden). Hvis jeg setter riktig bredde for Chrome for pc, blir det feil på for eksempel en mobil, der rammen da kommer kanskje 10-15 piksler inn i siste celle. Det er konsekvent, for jeg har akkurat samme problemet på en annen tabell i samme opplegget. Jeg kan selvsagt sette opp egen bredde på tabellen for forskjellige oppløsninger, men det blir krøkkete siden det er forskjellige mobiler, nettbrett og annet i huset som da må ha hver sin innstilling, noe som må fikles til hver gang det kommer en ny enhet. Hvorfor følger ikke rammen bare ytterkanten av tabellen, som jeg syns den burde?

 

Jeg har laget en JSFiddle av den: https://jsfiddle.net/5z7nzb53/2/

 

(Hvem sa at "you can't teach an old dog new tricks"? Det går iallfall med Mastiffer!)

 

Det står en bredde på Forsterkertabell (til høyre) som er 845, og det ser bra ut på pc, men i Fiddlen stikker det langt ut til høyre og demonstrerer ypperlig hva jeg mener.

Endret 25. april 2016 av Mastiff

[Emancipate]

Fjern alt du klarer å fjerne uten at problemet forsvinner før du spør.

[Emancipate]

Ok, got it. Tabellen har ingenting med saken å gjøre. Det er rett og slett en <div>. En <div> har display:block; som standard, og fyller dermed hele bredden.
 
Etter min mening er hele oppleget merkelig kodet. Du kan sette float: left; på den diven, og det vil "løse" problemet. Men sjansen er stor for at du senere får mye mer merkelige problemer, ettersom du ikke aner hva du holder på med (regner jeg med, da).
 

Edit: https://jsfiddle.net/a3gpub1L/1/

Endret 25. april 2016 av Emancipate

[Mastiff]

Vel, nei, egentlig vet jeg ikke det... Jeg fikler bare med kode andre har laget for meg, til styringen av huset. Det fungerer ypperlig, det er bare det kosmetiske som gjenstår. Alt kommer som sagt dynamisk inn der fra Girder, og funksjonen er jo det viktigste. Jeg prøver bare å ta siste finpuss nå. MEN FLOAT FUNGERTE!!!! Tusen takk! Jeg skjønner ingenting, men det trenger jeg heller ikke gjøre!

[Emancipate]

Jeg aner ikke hva Girder er, men fint.

[Mastiff]

Et automatiseringsprogram som styrer alt mulig i huset mitt. Smarthus med uendelige muligheter, bare man kan litt LUA. Det kan jeg noe av, men ikke CSS...

[Matsemann]

Det er et vanlig problem i CSS, en tabell inni en div "dytter" ikke riktig bredde på diven. Sett diven til å være "display: inline-block" og den oppfører seg som du ønsker. Float fungerer også ja, men ikke "på generelt basis" da det kan påvirke andre ting. Men om det løste problemet funker det nok bra nok her.

Endret 25. april 2016 av Matsemann

[Mastiff]

Da har jeg fått til nesten alt. Jeg krangler bare litt med en liten ting. Sånn ser det ut i Chrome på pc:

 

 

Jeg er godt fornøyd med det, fancy nok ikoner og forskjellig farge på innerrammene på annenhver rad, så det er lett å følge med øynene. Det fungerer like bra med enhver oppløsning på pc. Jeg har prøvd å kjøre en VM med Chrome i 1280x800, som er oppløsningen til det nettbrettet jeg har satt som hovedstyring i en bilde ramme i stua, og det funker like bra.

 

Men sånn blir det på alt av Android, ser det ut til:

 

 

Noen anelse om hvorfor det blir sånn, og hva jeg kan gjøre for å fikse det? Jeg kan jo endre venstre marg i hovedtabellen, men da blir det avstand mellom tabellene på en pc, og det ser ikke så pent ut. I tillegg er det sånn at på Firefox er det mer avstand mellom dem, omrent som om det skulle vært to av de tjukke ytterbordene mellom den venstre titteltabellen og den høyre hovedtabellen. Har det kanskje med det samme å gjøre? Jeg bruker  display: inline-block; på hoveddelen av tabellen, men ikke på td og tr, da blir det krøll.

Endret 30. april 2016 av Mastiff

[Matsemann]

Sett en større bredde på den venstre tabellen, og øk venstre marg på den høyre tabellen. Ser ut til at de får forskjellig bredde.

[Mastiff]

Der satt den, takk! Er det kanskje fordi tekst blir renderet litt annerledes i Android, så bredden blir feil når tabellen justerer seg til det?

[Matsemann]

Det jeg gjettet på, i hvert fall.

[Mastiff]

Sånn i ettertid (etterpåklokskap er jo en eksakt vitenskap...) burde jeg nok forstått det. Jeg ser jo nå på Android-bildet at skriften på de lengste sonenavnene går helt ut til kantene av tabellen, så de må nødvendigvis pushe tabellen over i den neste. Øynene er det første man blir blind på...