Avatar billede AnyFellow Seniormester
10. december 2020 - 11:50 Der er 6 kommentarer og
1 løsning

Tabel indsættes, men den bryder layoutet

Jeg kan desværre ikke vise hjemmesiden, da den er intern.

Jeg henter nogle data via jquery, danner en tabel og indsætter denne med:
$("#content").html(table_content);

Den indsatte tabel opfører sig anderledes, end hvis den er indsat i html-koden oprindelig.

Den DIV tabellen indsættes i har sat en fast bredde på 900 px;
Tabellen har ikke sat en bredde, men den første TD er sat til 17% bredde og den sidste TD er sat til 37% bredde. Af en eller anden grund bliver den sidste TD 1171px bred, når den indsættes via JQUERY, men når den er indsat i HTML'en fra start, har den korrekt bredde.

Jeg har forsøgt at sætte en fixed bredde på TABLE, TR, TD uden at det ændret layoutet, når tabellen sættes ind via JQUERY.

Hvad overser jeg, eller benytter forkert?
Avatar billede Rune1983 Ekspert
10. december 2020 - 12:37 #1
Anvender du stylesheets til at sætte breden?
Avatar billede Rune1983 Ekspert
10. december 2020 - 12:37 #2
Lidt mere infor ville hjælpe. Tænker på html koden.
Avatar billede AnyFellow Seniormester
10. december 2020 - 12:57 #3
Eksempel på tabel sat ind på siden:

<div id="container">
  <div id="content">
    <table class="page_indeks">
      <tr>
        <td>Kolonne 1</td>
        <td>Kolonne 2</td>
        <td>Kolonne 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui. Maecenas facilisis nisl vitae nibh. Proin vel seo est vitae eros pretium dignissim. Aliquam aliquam sodales orci. Suspendisse potenti. Nunc adipiscing euismod arcu. Quisque facilisis mattis lacus. Fusce bibendum, velit in venenatis viverra, tellus ligula dignissim felis, quis euismod mauris tellus ut urna.</td>
      </tr>
    </table>
  </div
</div>


CSS:

#container {position:relative; margin:0 auto; width:100%; background:#ffffff; height:auto !important; height:100%; min-height:100%; width:960px; border-left:1px solid #000000; border-right:1px solid #000000;}
#content {position:relative; background:#fcfcfc; border:1px solid #cccccc; width:918px; padding:10px; margin:0 10px 0 10px;}
table, td {font-size:11px; border-collapse:collapse; vertical-align:top; text-align:left; border-spacing:0;}
td:first-child{width:17%; border-right:1px solid #b3b3b3;}
td:last-child{width:37%; border-left:1px solid #b3b3b3;}


Jeg har ikke andet indhold i min css vedr. tabeller, hvor der er angivet bredde.
Avatar billede AnyFellow Seniormester
10. december 2020 - 12:58 #4
Når tabellen er sat ind direkte i koden, passer den med bredden på den omkring liggende div (content).

Når den indsættes i content vha. jquery, strækker den sidste kolonne i tabellen sig langt ud over div'en.
Avatar billede Rune1983 Ekspert
10. december 2020 - 14:20 #5
Du mangler et tag i slutningen
</table>
  </div
</div>
Avatar billede AnyFellow Mester
10. december 2020 - 14:47 #6
Ja, det er skrivefejl her kun. Den er med i min kode.
Avatar billede AnyFellow Seniormester
11. december 2020 - 09:05 #7
Efter længere tids søgen, fandt jeg ud af, at det var et langt link, der gav problemet. Beklager.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester