Avatar billede Lucky_Mik Nybegynder
16. februar 2010 - 14:38 Der er 8 kommentarer og
1 løsning

kolonnebredde i tabel

Hej

Jeg har en tabel, hvor width er sat til 100%.

Kolonnerne fordeles over hele denne width, d.v.s. med en del "luft" imellem, hvis indholdet ikke fylder meget. Jeg vil gerne kunne venstrejustere kolonnerne i tabellen, så man stadig kan se tabellens baggrund. Der skal ligesom være en tom kollonne eller celel sidst i hver række der sluger den resterende plads. Tabellen genereres dynamisk, så jeg véd ikke hvor meget indhold der er i cellernes.

Måske er det et html-spørgsmål, men jeg bruger en del CSS, det kan vel ordnes med det :-)
Avatar billede a2p-dk Nybegynder
17. februar 2010 - 03:34 #1
jeg ville lægge en div rundt om tabellen <div><table ...>

Og så fjerne table width så den er auto. Så ville jeg sætte baggrundsbilledet på diven istedet.:)
Avatar billede Lucky_Mik Nybegynder
17. februar 2010 - 06:55 #2
Jeg har ikke forklaret det rigtigt. Det er rækkernes baggrundsfarve, som skal fylde hele tabellens bredde. Jeg har flere tabeller under hinanden på samme side, og de skal have samme bredde(100%).
Avatar billede mireigi Novice
24. februar 2010 - 12:56 #3
Umiddelbart lyder det som om du skriver en tabel ud hvor antallet af celler varierer fra række til række.

En fuske-måde er at tilføje en celle til hver række, efterhånden som de skrives, der har en colspan på fx 50. Det er ikke en pæn måde at gøre det på, men det bør virke.

Ellers vil jeg foreslå at du arrangerer dine data i individuelle tabeller sorteret efter antal celler.
Avatar billede Lucky_Mik Nybegynder
24. februar 2010 - 13:56 #4
Nej, der er lige mange celler i hver række.

Men den sidste celle i en række skal fylde resten af rækken, op til tabellens width på 100%.
Avatar billede mireigi Novice
24. februar 2010 - 14:30 #5
Det vil den normalt også gøre.

<table width="100%">
  <tr>
    <td>Lirum ipsum</td>
    <td>dolor sit amet</td>
  </tr>
</table>


Her vil de to celler hver fylde 50%. Medmindre du angiver en fast bredde på den ene af cellerne, vil de altid dele sig op ligeligt.

Du kan løse dit problem ved at bruge tabeller i tabeller:
<table width="100%">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            Lorem ipsum dolor sit amet
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>


Hvis det ikke giver hvad du ønsker, må du linke til den side hvor problemet er på, og levere noget kildekode.
Avatar billede Lucky_Mik Nybegynder
24. februar 2010 - 19:48 #6
Her er noget kode. Celle 1-6 skal i orange række stå tæt sammen. Og celle 6 i orange række skal så fylde ca. 90 % af de 100%.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>test</title>
</head>
<body>

<table width="100%" style="border: 1px solid red;">

<tr style="background-color: orange;"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

<tr style="background-color: green;"><td colspan=6>jhgJKjk jkhg jkh jk hg jlhb ljk hlk h klj klj hkl h lkklfj lkgfjgvæ æglm glhm ghælj gj kghøj kgøljmkgjølgk jølgk jøghj ølghk jøghjøghjk øghj kgøhjk ghøjk øhgjk øghækj økj øæjkgøjkgøjk gøjk øgæjk øgjkgøjk øj øgjø kjøægkj øægjk'djkfd'jkdgf'jækd'æjkgjæ kgøæ'jkghøæjghæ kghjøgkh øægøj g jøæ køæjgdøæ jkfjøædkjøægdkj </td></tr>

<tr style="background-color: orange;"><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>

<tr style="background-color: green;"><td colspan=6>jhgJKjk jkhg jkh jk hg jlhb ljk hlk h klj klj hkl h lkklfj lkgfjgvæ æglm glhm ghælj gj kghøj kgøljmkgjølgk jølgk jøghj ølghk jøghjøghjk øghj kgøhjk ghøjk øhgjk øghækj økj øæjkgøjkgøjk gøjk øgæjk øgjkgøjk øj øgjø kjøægkj øægjk'djkfd'jkdgf'jækd'æjkgjæ kgøæ'jkghøæjghæ kghjøgkh øægøj g jøæ køæjgdøæ jkfjøædkjøægdkj </td></tr>

</table>

</body>
</html>
Avatar billede mireigi Novice
24. februar 2010 - 20:53 #7
Den kan du kun løse ved at angive faste bredder til celle 1-5 og ingen bredde på celle 6 som fx:
<table width="971" border="0" style="border: solid 1px red;">
  <tr style="background-color:orange;">
    <td width="120">Lorem</td>
    <td width="120">ipsum</td>
    <td width="120">dolor</td>
    <td width="120">sit</td>
    <td width="120">amet</td>
    <td></td>
  </tr>
  <tr style="background-color:green">
    <td colspan="6">
      Lorem ipsum dolor sit amet
    </td>
  </tr>
</table>


Bemærk at jeg har angivet tabellen og celle 1-5 til at have faste bredder målt i pixels for at sikre at alle besøgende ser de opstillede data på samme måde. Hvis man bruger %'er bliver opstillingen af data afhængig af den besøgendes skærm opløsning.

971px er den optimale størrelse på en 1024x768 skærm, da det tager højde for lodret scrollbar og giver en god margin omkring tabellen (15px i hver side ca).

En anden måde, der måske er mere i stil med det du eftersøger er følgende:
<table width="971" border="0" style="border: solid 1px red;">
  <tr style="background-color:orange;">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td width="90%"></td>
  </tr>
  <tr style="background-color:green">
    <td colspan="6">
      Lorem ipsum dolor sit amet
    </td>
  </tr>
</table>


Det er i orden at bruge %'er på celler, hvis tabellen er fast defineret af pixels.
Avatar billede Lucky_Mik Nybegynder
24. februar 2010 - 21:11 #8
Problemet er at jeg ikke ved hvad der er i hver enkelt celle, så jeg ved ikke hvor bred den er. Det kan nok ikke løses med css.

Tak for forsøgene. Læg et svar så får du point :-)
Avatar billede Lucky_Mik Nybegynder
03. marts 2010 - 11:27 #9
Jeg lukker nu
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