Avatar billede Slettet bruger
13. juni 2010 - 11:20 Der er 8 kommentarer og
1 løsning

Ikke anvende css på tabel i tabel

Hej

Jeg har en tabel i en tabel (forenklet kode):

<table class="border>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Min CSS:
table {
    font-family:        Verdana, Arial, Helvetica, sans-serif;
    font-size:        11px;
}

table.border {
    border-color:        #000000;
    border-width:        0px 0px 1px 1px;
    border-style:        solid;
}

table.border td, th {
    border-color:        #000000;
    border-width:        1px 1px 0px 0px;
    border-style:        solid;
}

Styling af min tabel virker som den skal.
Tabellen der er indlejret bliver også ramt af css'en. Denne tabel kan jeg ikke ændre i, idet den bliver indsat af noget javascript, som jeg ikke umiddelbart kan ændre i.

Hvad kan jeg gøre for at undgå at den indlejrede tabel bliver ramt af min CSS?
Avatar billede montago Praktikant
13. juni 2010 - 12:21 #1
Lave noget mere Javascript som ændre på tabellen EFTER den er blevet indsat... f.eks. skifte dens class...
Avatar billede Slettet bruger
13. juni 2010 - 19:10 #2
montago...> Ikke lige den løsning jeg var på udkig efter.

Det må være muligt at lave css-delen, således den begrænses til selve hovedtabellen og ikke den indlejrede.
Avatar billede montago Praktikant
13. juni 2010 - 19:48 #3
tjow...

du kan altid lave din selector, sådan at det medtager sin parent

så skal du bare være sikker på at den anden tables parent ikke er magen til.

ex:

.AndreTableContrainers table.border
{
}

cirka... (det er over 1 år siden jeg sidst har rodet med CSS...)
Avatar billede tjens Nybegynder
14. juni 2010 - 16:12 #4
Giver denne variant den ønskede effekt?

<html>
<head>
<style>
table {
    font-family:        Verdana, Arial, Helvetica, sans-serif;
    font-size:        11px;
}

table.borderBottomLeft  {
    border-color:        #000000;
    border-width:        0px 0px 1px 1px;
    border-style:        solid;
}

td.borderTopRight  {
    border-color:        #000000;
    border-width:        1px 1px 0px 0px;
    border-style:        solid;
}

</style>
</head>
<body>
<table class="borderBottomLeft">
  <tr>
    <td class="borderTopRight">Border styled
      <table>
        <tr>
          <td>inside table</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
Avatar billede Slettet bruger
19. juni 2010 - 19:52 #5
Beklager den lange svartid. Har været lidt hængt op.

montago...> Jeg forstår ikke hvad du mener med dit eksempel?

tjens...> Ikke hvad jeg umiddelbart kan se.
Avatar billede tjens Nybegynder
20. juni 2010 - 18:29 #6
#5 Hvad mener du med "umiddelbart kan se"
Har du ikke gemt filen på din PC, og set den i en browser?

Jeg har lagt dit og mit eksempel her: http://tjens.dk/eksperten/912006/
og jeg synes der er en forskel på den indlejrede tabel.

Vil forklare spørgsmålet igen?
Avatar billede Slettet bruger
22. juni 2010 - 08:02 #7
tjens...> Har prøvet dit eksempel igen, og kan se at det virker som ønsket, dog er jeg ikke vil med idéen om at skulle sætte en klasse på alle td'er i tabellen. Kan det ikke laves anderledes?
Avatar billede Slettet bruger
25. juni 2010 - 08:42 #8
tjens...> Læg et svar og pointene er dine.
Avatar billede tjens Nybegynder
25. juni 2010 - 10:08 #9
Hermed et svar
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