Force line break i en tabel i jsp

peque
Antal: 890
Tilmeldt:
20-04-2005
User is offline
Force line break i en tabel i jsp

Hejsa.
Jeg er ved at lave min en lille JSP side med nogle oplysninger i - hvor enkelte felter kan være meget lange navne.

Jeg henter mine oplysn inger fra en PSQL database - hvilket kører perfekt.
Jeg har mine tabeller til 700px i bredden. - delt op på 2 kollonner 150px og 650px
Det oplsag jeg laver kommer tilbage med en 240karakter lang værdi som skal skrives i det 650px felt.

<table width="700" border="0" align="center">
               <tr>
                <th align="left" width="150">Min værdi:</th>
                <th align="left" width="650"><pre><% out.println(dvalue); %></pre></th>
              </tr>
</table>

Men jeg kan ikke få den til at breake - så reelt bliver den tabel så pludselig 1500px bred og skriver hele værdien på en lang linie.
Hvordan kan jeg forcer en linebreak her således tabelformatteringen holdes.

P


Looop
Looop's picture
Antal: 1062
Tilmeldt:
30-10-2008
User is online
Først og fremmest hvis du

Først og fremmest hvis du gør det der, kommer din data i en table header og ikke i en td, som jeg ellers ville antage du burde skulle gøre. For det andet, hvorfor aligner du teksten center på tabellen for så der efter at gå tilbage til left?

Anyways tilbage til dit spørgsmål. Problemet er dit <pre>. I HTML5 virker width ikke længer på <pre> og det gør også at width bliver ignoreret hvis det er nested. Så hvis du dropper <pre> så skulle det virke det gør det her test i hvertfald:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <table width="700" border="0" align="center">
      <tr>
        <th align="left" width="150">Min værdi:</th>
        <th align="left" width="650">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nulla dui, ultrices tempor ex eu, hendrerit gravida dui. Cras dignissim bibendum felis, vel eleifend nisi porttitor id. Proin eu urna nec lacus egestas condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget odio sagittis, rutrum nunc et, semper leo. Aliquam elementum nisi in vestibulum cursus. Sed scelerisque lorem lacus, vitae semper est volutpat sit amet. Aliquam vel dui erat. Vestibulum eget enim ornare magna luctus aliquet. Suspendisse quis sagittis ex</th>
      </tr>
    </table>
  </body>
</html>

Du skal dog vide at hvis du vil beholde funktionaliteten af <pre>, skal du ud i noget andet end bare det oven over.

-looop

./looop


peque
Antal: 890
Tilmeldt:
20-04-2005
User is offline
Hej Loop og tak for

Hej Loop og tak for svar.
Aligner tabellen som center og derefter teksten i th til left ?

Nå men selve spørgsmålet:
når jeg sætter følgende op på min jsp side - så falder alle formateringer ud af cellen og det er en lan linie hvor der kommer scrollbar i bunden!

table width="700" border="0" align="center">
               <tr>
                <th align="left" width="150">Min værdi:</th>
                <th align="left" width="650"><% out.println(dvalue); %></th>
              </tr>
</table>

Dog har jeg følgende i min header for siden
Men i princippet er det en lang linie ( ingen mellemrum eller lign ) som skal forces til en linebreak.


Looop
Looop's picture
Antal: 1062
Tilmeldt:
30-10-2008
User is online
Du mangler < i åben

#2:
Du mangler < i åben table tagget

I forhold til: Aligner tabellen som center og derefter teksten i th til left ?

Det her <table align="center"> centre teksten i hele tabellen, det centre ikke tabellen på siden. Her efter <th align="left"> venstre aligner teksten i din <th> og derfor annulere din align på tabellen. Hvis du ønsker at centre tabellen på siden kan du gøre det (CSS3):

table{
    width: 700px
    margin-left: auto;
    margin-right: auto;
}

DOG!!!!!! begynd at bruge %-vis width, med mindre du virkelig har brug for den faste bredde.

Må jeg spørge hvilken version af JSP du bruger, fordi inline style er generelt en meget nem måde at gøre din HTML uoverskuelig på, så vil forslå du bruger stylesheet filer.

./looop


frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
så vil forslå du

#3: så vil forslå du bruger stylesheet filer.

Det er (næsten) en million år siden jeg har lavet hjemmesider, men måske kan du bruge lidt af dette:

<html>
<head>
<style type="text/css">
.bruger {
  table-layout: fixed;
  width: 200px;
  white-space: normal;
  margin-left: auto;
  margin-right: auto;
}
.navn {
  width: 200px;
  text-align: left;
}
</style>
</head>
<body>
<table border="1" class="bruger">
    <tr>
      <th class="navn">tekst
      </th>
    </tr> 
</table>
</body>
</html>

peque
Antal: 890
Tilmeldt:
20-04-2005
User is offline
Hej Gutter. Tak for jeres

Hej Gutter.
Tak for jeres svar - har lige haft lidt travlt på jobbet.
Men jeg har prøvet de forskellige løsninger men uden helkd som så
Det ender med at stå på en lang linie og foresætte ud til højre.
MEN det må jeg leve med, men er også OK da det kun er en internt informationsside - men det ser bare ud af røvens til .

Men tak for forsøget om ikke andet

P


frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
#5Det sker fordi den

#5

Det sker fordi den returnerede 240 karakter lange værdi ingen mellemrum har, men CSS tag "table-layout: fixed;" bør forhindre at cellen udvider tabellen. Hvis man trykker Enter efter værdien, så forlænges tabellen dog.

Jeg går ud fra den retunerede database værdi er vigtig, men den behøver ikke nødvendigvis at blive vist. Den kan f.eks skjules ved at lade tal farven være den samme som baggrunden, og ved at forhindre at cellen kan editeres på siden.

Du kan se det rå eksempel her. Det er klart nok ikke færdigt, men du ser at tabellen ikke udvides selvom teksten i cellen ikke ombrydes: https://db.tt/v0CeQJIh

Tilføjer du color: white; til .navn og ændrer tabel attributten til border="0", så vil tabellen med den returnerede værdi være skjult, men tilstede, hvis det overhovedet er nødvendigt for database funktionen.

Det tvivler jeg på det er, men jeg ved ikke hvordan du har skruet det sammen. Muligvis bør den returnerede værdi beregnes af databasen og slet ikke præsenteres i HTML?

Som sagt er det længe siden jeg har skrevet hjemmesider, men jeg er sikker på at det kan løses. Jeg ved ikke hvilken metode der er bedst, men tabellen kan også skjules med et JavaScript:

http://www.w3schools.com/jsref/prop_style_visibili...

Der er sikkert andre tags du vil finde nyttige fra sitet, eller et af de andre sites fra denne søgning:

https://www.google.dk/search?q=how+to+hide+a+table...

For en best practice vejledning, skal du bruge en trænet websmed. Det kan jeg ikke levere.


mrbrown79
Antal: 470
Tilmeldt:
12-01-2010
User is offline
Det er også lang tid

#0:
Det er også lang tid siden, jeg har leget med HTML - og min fremgangsmåde har alle dage været at forsøge mig frem uden dybere kendskab til kombatibilitet. Nedenstående løser formålet i Firefox. Det er kombinationen af at fjerne < pre> (hvorfor vil du have den?) og benytte max-width og word-wrap. Desuden kan du med "overflow:hidden" få det til at lykkes med < pre>, men med det resultat, at den overskydende del bliver usynlig.

Er det en regnefejl, at du sætter tabelbredde til 700px, og kolonnerne til totalt 650+150=800px? Eller er der noget, jeg har misforstået?

<table>
  <tr>
    <th align="left" width="150px">My val:</th>
    <th align="left" width="650px" style="overflow: hidden;max-width:650px;word-wrap:break-word;color:red;border:1px solid black;">010101010011001010101010101010101010010101010101010101010101010101010101010011001010101010101010101010101010101001010101010101010101010101010101010100101010101011010011010</th>
  </tr>
</table>

<div style="margin-top:40px;width:650px;border:1px solid black;">
  <p>my reference container of same width</p>
</div>


frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
Det sker på alle sites.

Det sker på alle sites. Hvis jeg skriver (Oversat fra binær: Dette er binær tekst):

01000100 01100101 01110100 01110100 01100101 00100000 01100101 01110010 00100000 01100010 01101001 01101110 11000011 10100110 01110010 00100000 01110100 01100101 01101011 01110011 01110100

Så vises teksten ombrudt fordi den indeholder mellemrum.

Fjerner jeg mellemrum, så ryger teksten udover celle og tabel, uanset hvordan man roterer, i det mindste som jeg forstår det.

010001000110010101110100011101000110010100100000011001010111001000100000011000100110100101101110110000111010011001110010001000000111010001100101011010110111001101110100

Sagen er formentlig at #0 synes det ser tåbeligt ud. Det gør det jo også, og det kan også forandre designet på sitet, med mindre tabellen er låst, Er den det, så vil det forhindre at den returnerede værdi flytter rundt på designet.

Jeg tror imidlertid ikke at den returnerede værdi er vigtig for visningen i HTML eller funktionaliteten af databasen. Jeg ved det bare ikke, men hvis den er, så kan værdien skjules med en class eller div tag, JavaScript, og formentlig også med en font-color attribut på cellen.


mrbrown79
Antal: 470
Tilmeldt:
12-01-2010
User is offline
Fjerner jeg mellemrum,

#8: Fjerner jeg mellemrum, så ryger teksten udover celle og tabel, uanset hvordan man roterer, i det mindste som jeg forstår det.

Jeg er helt med på at manglende mellemrum gør opgaven ekstra drilsk. Derfor er mit eksempelt netop uden mellemrum. Har du prøvet eksemplet af? I min browser (Firefox) ombryder den lilnjerne i ovennævnte tabel - trods manglende mellemrum

Jeg tror imidlertid ikke at den returnerede værdi er vigtig for visningen i HTML eller funktionaliteten af databasen.

Manden (#0) konstruerer selv sin tabel og har bedt om hjælp til at plotte en lang værdi. Og din løsning er at lade være med at plotte den?!


frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
Derfor er mit eksempelt

#9: Derfor er mit eksempelt netop uden mellemrum. Har du prøvet eksemplet af? I min browser (Firefox) ombryder den lilnjerne i ovennævnte tabel - trods manglende mellemrum

Det virker perfekt også i Chrome, Opera og Vivaldi. Teksten ombrydes uden mellemrum. Det opfylder præcist hvad #0 spørger til.

word-wrap: break-word; er "the missing link".

Det burde implementeres i linuxin hvor det vil løse samme problem.

Jeg ved ikke om det er nødvendigt at plotte værdien i HTML. Måske er det?.


frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
Sat ind i class style:

word-wrap: break-word; sat ind som class style:

<html>
<head>
<style type="text/css">
.id-tabel {
  background: black;
  table-layout: fixed;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  border-style: solid;
  border-color: white;
}
.id-vaerdi {
  text-align: left;
  word-wrap: break-word;
  color: gray;
}
   tr:hover {
   background-color:#f5f5f5
}
</style>
</head>
<body>
<table class="id-tabel">
    <tr>
      <th class="id-vaerdi"> 01000100011001010111010001110100011001010010000001100101010000000000000000000011001000100000011000100110100101101110110000111010011001110010001000000111010001100101011010110111001101110100
      </th>
    </tr> 
</table>
<table class="id-tabel">
    <tr>
      <th class="id-vaerdi"> Test
      </th>
    </tr> 
</table>
</body>
</html>

frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
Der er også en

Der er også en overflow-wrap: break-word; der ser ud som den gør det samme, bare ikke i Firefox.


mrbrown79
Antal: 470
Tilmeldt:
12-01-2010
User is offline
word-wrap: break-word;

#10: word-wrap: break-word; er "the missing link".

I Firefox, var det - som nævnt - nødvendigt at kombinere det med "max-width".


frogmaster
frogmaster's picture
Antal: 3582
Tilmeldt:
20-05-2010
User is offline
I Firefox, var det -

#13: I Firefox, var det - som nævnt - nødvendigt at kombinere det med "max-width".

Som jeg husker det, kunne der være forskel med samme browser i andre OS. #0 bør nok tjekke det af i mere end Linux. Her er den uden max-width i Firefox som class style, med width: 700px; og table-layout: fixed; på tabellen..

Jeg håber #0 vil kunne bruge det nu med din sidste tilføjelse.

Som det ser ud nu med koden fra #11:
https://db.tt/MnEtW3D4

Tests fra::
OS X El Capitan: Firefox, Chrome, Safari
Windows 10 Enterprise: Firefox, IE, Edge; Chrome, Chromium, Opera,
Linux Mint: Firefox, Chromium, Opera, Opera developer, Vivaldi.