[CSS] border-top en border-bottom geven geen resultaat

[Reveller]

Ik heb de volgende html:

HTML:

<style>
table, th, td {
  border-collapse  : collapse;
  }

#domains .row_top {
  border-top       : 1px solid #F6C938;
  }

#domains .row_odd, #domains .row_bottom {
  background-color : #FDEEC3;
  }

#domains .row_bottom {
  border-bottom    : 1px solid #F6C938;
  }

#domains .price {
  border-right     : 1px solid #F6C938;
  }
</style>

<table id="domains" cellpadding="2">
<tr class="row_top">
  <td>.nl</td><td class="price">5.99</td>
  <td>.com</td><td class="price">7.50</td>
  <td>.net</td><td class="price">7.50</td>
  <td>.org</td><td class="price">7.50</td>
</tr>
<tr class="row_odd">
  <td>.info</td><td class="price">7.50</td>
  <td>.biz</td><td class="price">7.50</td>
  <td>.name</td><td class="price">10.00</td>
  <td>.be</td><td class="price">10.00</td>
</tr>
<tr class="row_even">
  <td>.de</td><td class="price">17.50</td>
  <td>.nu</td><td class="price">50.00</td>
  <td>.co.uk</td><td class="price">25.00</td>
  <td>.org.uk</td><td class="price">25.00</td>
</tr>
<tr class="row_bottom">
  <td>.com.tw</td><td class="price">29.00</td>
  <td>.org.tw</td><td class="price">29.00</td>
  <td>.vg</td><td class="price">17.50</td>
  <td>.bla</td><td class="price">99.99</td>
</tr>
</table>

In IE ziet dat er als volgt uit:



En zo in FF:



Waarom ziet het er niet gewoon zo uit?



Voor de duidelijkheid - ik wil boven en onder een border zetten. Volgens mij doe ik dat met onderstaande regels, maar om de een of andere manier werkt dat niet:

Cascading Stylesheet:

#domains .row_top {
  border-top       : 1px solid #F6C938;
  }

#domains .row_bottom {
  border-bottom    : 1px solid #F6C938;
  }

Ik heb al verschillende dingen geprobeerd, zoals de css te veranderen naar .row_bottom # domains of zelfs gewoon .row_bottom, maar dit maakt geen verschil. Wat doe ik nu verkeerd?

[Blaise]

Kan je niet gewoon de border aan de table geven?

[ Voor 73% gewijzigd door Blaise op 19-09-2005 18:54 ]

[Michali]

Een rij is niet te stijlen. Het is puur een structureel element. Pas het toe op de cellen of beter nog (zoals Blaise voorstelt) gewoon op de tabel.

[Reveller]

Michali schreef op maandag 19 september 2005 @ 19:03:
Een rij is niet te stijlen. Het is puur een structureel element. Pas het toe op de cellen of beter nog (zoals Blaise voorstelt) gewoon op de tabel.

Het is een goed idee om de tabel te stylen via de table:

Cascading Stylesheet:

#domains {
  border          : 1px solid #F6C938;
}

Alleen de opmerking dat een rij niet te stylen is klopt volgens mij niet, want ik kan wel een achtergrondkleur aan een rij meegeven.

Cascading Stylesheet:

#domains .row_odd, #domains .row_bottom {
  background-color : #FDEEC3;
  }

EDIT: GoT doet het overigens ook zo, zie ik:

Cascading Stylesheet:

table.listing tr.alt1 {
    background-color: #fefefe;
}
table.listing tr.alt2 {
    background-color: #fafafa;
}

[ Voor 23% gewijzigd door Reveller op 19-09-2005 19:17 ]

[UltimateB]

Ik gebruik persoonlijk altijd.

Cascading Stylesheet:

table tr.row_top td {
 border-top:1px solid #F6C938;
}
table tr.row_)bottom td {
 border-bottom:1px solid #F6C938;
}

Ik loop me er ook nog wel eens aan te irriteren dat het niet helemaal gaat zoals je zou zeggen

Vandaag zelfs nog...