Avatar billede jokkejensen Novice
20. august 2007 - 20:55 Der er 6 kommentarer og
1 løsning

Tabel's størrelse efter width: 100%

Jeg har følgende tabel, lagt ind i et div med noget padding.

Alle mine andre elementer som opfører sig pænt med width:100%;

Men den her skide tabel gør bestemt ikke, den bliver lige en smule breddere, og får den iframe den ligger i til at lave scroll i bunden.

tabellen er en asp.net genereret liste.. jeg har forsøgt at nulstille det jeg mener har betydning for en tabels bredde med følgende CSS;

.List
{
    width: 100%;
}

.List, .List *
{
    padding:0px !important;
    margin:0px !important;
    border:0px !important;
    border-collapse: collapse;
}


Selve markuppen ser sådan her ud:

    <table class="SimpleList List" cellspacing="0" border="0" id="ctl03_ctl01_LatestOrders_ListOrder" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Ordrenr.</th><th scope="col">Dato</th><th scope="col">Beløb</th><th scope="col">Betaling</th><th scope="col">Blacklist</th>
        </tr><tr>
            <td>WB02013</td><td>d. 15-08-07 kl. 16:54</td><td>Kr. 875,00</td><td>Faktura</td><td>
               
                    <a href="http://dpa.gennemse.dk/TradelinkInput/Content.aspx?c=Blacklist&amp;item=348">Blacklist</a>
               
               
            </td>
        </tr><tr class="AlternatingItem">
            <td>WB02012</td><td>d. 17-05-07 kl. 18:56</td><td>Kr. 3592,75</td><td>Efterkrav</td><td>
               
                    <a href="http://dpa.gennemse.dk/TradelinkInput/Content.aspx?c=Blacklist&amp;item=326">Blacklist</a>
               
               
            </td>
        </tr><tr>
            <td>WB02011</td><td>d. 17-05-07 kl. 17:15</td><td>Kr. 3250,00</td><td>Afhentning</td><td>
               
                    <a href="http://dpa.gennemse.dk/TradelinkInput/Content.aspx?c=Blacklist&amp;item=325">Blacklist</a>
               
               
            </td>
        </tr><tr class="AlternatingItem">
            <td>WB02009</td><td>d. 13-05-07 kl. 14:40</td><td>Kr. 373,75</td><td>Afhentning</td><td>
               
                    <a href="http://dpa.gennemse.dk/TradelinkInput/Content.aspx?c=Blacklist&amp;item=322">Blacklist</a>
               
               
            </td>
        </tr><tr>
            <td>WB02007</td><td>d. 13-05-07 kl. 14:32</td><td>Kr. 475,25</td><td>Efterkrav</td><td>
               
                    <a href="http://dpa.gennemse.dk/TradelinkInput/Content.aspx?c=Blacklist&amp;item=321">Blacklist</a>
               
               
            </td>
        </tr>
    </table>



Men alligevel bliver den en smule større end de andre elementer.

Selve problem stillingen i det hele er at det er et admin modul til vores E-shop der skal implementeres i synkron.via, så jeg slipper ikke for alt det frame halløj.

Nogen der har et bud på hvordan den tabel kan opføre sig, så den bliver breddere ?

Sig til hvis noget skal uddybes.

På forhånd tak


/JJ
Avatar billede jokkejensen Novice
20. august 2007 - 21:21 #1
aha, Jeg har "lokaliseret" problemet til at kun at fremkomme når den vertikale scrollbar fra iframen er fremme....

Men hvordan klarer jeg mig ud af det ? - altså når der ikke er scroll på siden, passer tabellen, men hvis der fremkommer en vertical scrollbar i iframen, bliver tabellen ikke det mindre..

skal der virkeligt JS til for at løse?

/JJ
Avatar billede thesurfer Nybegynder
20. august 2007 - 21:42 #2
Har du et link til siden, så vi kan se det "live" ?
Avatar billede jokkejensen Novice
20. august 2007 - 22:18 #3
Nej desværre..

Jeg har dog fået det løst ved i stedet for at bruge scrollbaren fra iframen (blot positioneret den 100% høj og bred), og lagt en wrapper med overflow:auto; omkring indholdet.

Jeg har ligeledes fundet en løsning men det kræver man dropper DTD'en på sine dokumenter.
Avatar billede olebole Juniormester
20. august 2007 - 22:25 #4
<ole>

Hvad sker der, hvis du lægge et div udenom tabellen? Jeg vil også gerne se CSS for klassen 'SimpleList'.

Dette er dog noget vrøvl:

.List, .List *
{
    padding:0px !important;
    margin:0px !important;
    border:0px !important;
    border-collapse: collapse;
}

Hvor er border-collapse property'en defineret for tr-, th-, td- og a-elementer?  =)

/mvh
</bole>
Avatar billede jokkejensen Novice
04. september 2007 - 10:35 #5
.List og .List * skulle da af min bedste overbevisning gerne ramme alt der ligger inde i:

<table class="List">
</table>

Den opfører sig i hvert fald sådan.. Nå men never mind, jeg fik det senere løst ordentligt.

/JJ
Avatar billede olebole Juniormester
04. september 2007 - 12:34 #6
Lige præcis - og det er jo også noget vrøvl, da du kun kan sætte border-collapse på et table-element ... lidt som at sætte font-family på et meta-element  ;o)
Avatar billede jokkejensen Novice
04. september 2007 - 20:43 #7
Nå ja - men som du selv tidligere har nævnt i en tråd... vil moderne browsere overse sådanne erklæringer, eller tildeling af ugyldige egenskaber som du sikkert vil kalde det :)..

Det var mere ment som et debug tiltag for at få den til at opføre sig korrekt..

vh. JJ
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