[CSS] borders bij tabellen

[Sgrovert]

Ik zit met hetvolgende css probleem, over het algemeen wil ik geen borders in mijn tabellen hebben. Echter komt het soms voor dat ik wel een tabel wil laten zien, die een rand heeft. Hiervoor heb ik een class gemaakt, welke van de tabel de linker-rand en boven-rand tekend, en van elke cel de rechterkant en onderkant. Hierdoor ziet de tabel er op het scherm precies zo uit als hij moet zijn. Echter wil ik nu in een tabel met een rand, een tabel zonder rand plaatsen.

De code:

HTML:

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

Cascading Stylesheet:

    table, tr, td{
        border:0px;
        }

    table.border {
        border-collapse: collapse;
        border:0px;
        border-top:1px solid black;
        border-left:1px solid black;
        }
        
    table.border td {
        border:0px;
        border-right:1px solid black;
        border-bottom:1px solid black;
        padding-left:3px;
        padding-right:3px;

        }

Het resultaat http://www.limusic.nl/test/fout.html (het gaat fout bij de teksts "Source code pagina" hij tekend van deze cell ook de onder- en rechter-rand, welke hij niet zou moeten tekenen.

[SchizoDuckie]

De oplossing is sim-pel: Gebruik geen tabellen voor layout!!!1111

Kijk eens naar de mooie mogelijkheden van het DIV element, het H1 element, etc en apply daar je stylesheets op. Je bent al een eindje op weg maar dan staat er ineens weer een tabel tussendoor voor niets

Verder: voor

HTML:

<div id="horzline"></div>

kan je natuurlijk ook gewoon

HTML:

<hr>

gebruiken

[ Voor 68% gewijzigd door SchizoDuckie op 06-04-2007 23:35 ]

[Martine]

Ik weer niet zeker dat je het woord 'border' mag gebruiken, buitendat probeer het onderstaande eens.

Cascading Stylesheet:

table, tr, td {
    border:0px;
}

.border {
    border-collapse: collapse;
    border:0px;
    border-top:1px solid black;
    border-left:1px solid black;
}

[Sgrovert]

SchizoDuckie schreef op vrijdag 06 april 2007 @ 23:33:
De oplossing is sim-pel: Gebruik geen tabellen voor layout!!!1111

Kijk eens naar de mooie mogelijkheden van het DIV element, het H1 element, etc en apply daar je stylesheets op. Je bent al een eindje op weg maar dan staat er ineens weer een tabel tussendoor voor niets

Tabellen wil niet lukken zoals ik het wil, dus ga ik maar een poging met divs wagen.

edit:
Na een half uurtje is het gelukt: http://www.limusic.nl/test/fout.html

Verder: voor

HTML:

<div id="horzline"></div>

kan je natuurlijk ook gewoon

HTML:

<hr>

gebruiken

<hr> gaat niet werken, omdat <div id="horzline"> de groene lijn tekent onder de banner, en ik hr op andere plekken als standaard element wil gebruiken.

[ Voor 6% gewijzigd door Sgrovert op 07-04-2007 02:43 ]

[Sgrovert]

Martine schreef op vrijdag 06 april 2007 @ 23:48:
Ik weer niet zeker dat je het woord 'border' mag gebruiken, buitendat probeer het onderstaande eens.

Cascading Stylesheet:

table, tr, td {
    border:0px;
}

.border {
    border-collapse: collapse;
    border:0px;
    border-top:1px solid black;
    border-left:1px solid black;
}

Deze code tekent alleen de lijnen links en boven. Maar dan mis ik de onderkant van mijn tabel.

[crisp]

euh:

Cascading Stylesheet:

table.border table td {
  border: none;
}