Beste mensen,

Ik ben nu al letterlijk 10 uur bezig met deze tabel:
http://genesiswebdesign.nl/dedrogeja...ce/concept.php

Ik kom er dan ook niet meer uit en hoop dat iemand van jullie weet hoe ik dit het beste op kan lossen (met of zonder code).

Wat ik wil:
Een 2 pixel zwarte rand om de kolom "De Droge Jachthaven", met een 1 pixel witte rand binnen die zwarte rand. In Firefox doet hij het perfect maar in bijv. Internet Explorer weer niet.

Ik zal de code plaatsen. Het is wel veel code, waarschijnlijk kan het een stuk makkelijker. Maarja, ik ben dan ook geen CSS expert.


De tabel:

Code:

<table width="710" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td id="tdheadingwit"></td>
    <td colspan="3" id="tdheading_rand"><div id="tdheading_inhoud">
        De Droge Jachthaven
      </div></td>
    <td id="tdheading">Ligplaats - Gemiddeld</td>
    <td id="tdheading">Stalling - Gemiddeld</td>
  </tr>
  <tr>
    <td id="tdheading2">Snel weg</td>
    <td id="randy"></td>
    <td id="tdgroen2">8 min. boot te  water, spullen aan boord, motor starten, trossen los!</td>
    <td id="randy"></td>
    <td id="tdgroen">3 min. spullen  aan boord, motor starten, trossen los!</td>
    <td id="tdrood">&gt; 40 min. voertuig  halen, locatie zoeken, wachttijd bij botenhelling</td>
  </tr>
  <tr>
    <td id="tdheading2">Bereikbaarheid</td>
    <td id="randy"></td>
    <td id="tdgroen2"> Zeer goed bereikbaar </td>
    <td id="randy"></td>
    <td id="tdgeel">Meestal redelijk</td>
    <td id="tdgeel">Meestal redelijk</td>
  </tr>
  <tr>
    <td id="tdheading2">Schade</td>
    <td id="randy"></td>
    <td id="tdgroen2"> 0 </td>
    <td id="randy"></td>
    <td id="tdrood">Door golfslag en vorst</td>
    <td id="tdgroen">0</td>
  </tr>
  <tr>
    <td id="tdheading2">Onderhoud</td>
    <td id="randy"></td>
    <td id="tdgroen2"> Alleen motorisch </td>
    <td id="randy"></td>
    <td id="tdrood">Schoonmaak, lakwerk onderwaterschip, onderhoud aan  romp (zowel bij hout als staal erg veel, polyester minder)</td>
    <td id="tdgroen">Alleen motorisch</td>
  </tr>
  <tr>
    <td id="tdheading2">Vaargebied</td>
    <td id="randy"></td>
    <td id="tdgroen2"> Nationaal gezien een toplocatie. Bereikbaar:  kagerplassen, braassemermeer, westeinderplassen, nieuwkoopse plassen </td>
    <td id="randy"></td>
    <td id="tdgroen">Algemeen goed</td>
    <td id="tdrood">Niet, vaak slecht gelegen</td>
  </tr>
  <tr>
    <td id="tdheading2">Prijs</td>
    <td colspan="3" id="tdgeel_rand"><div id="tdgeel_inhoud">
        Voordelig
      </div></td>
    <td id="tdrood">Duur</td>
    <td id="tdgroen">Goedkoop</td>
  </tr>
</table>

CSS:

Code:

#tdheading {
    width:180px;
    padding:5px;
    text-align:center;
    vertical-align:middle;
    background-color:#163a48;
    font-weight:bold;
    color:#FFF;
    height:100%;
}
#tdheading_rand {
    width:190px;
    background-color:#000;
    height:100%;
}
#tdheading_inhoud {
    width:180px;
    padding:5px;
    text-align:center;
    background-color:#000;
    font-weight:bold;
    color:#FFF;
    height:100%;
    margin:2px 2px 0 2px;
    border-left:#FFF solid 1px;
    border-right:#FFF solid 1px;
    border-top:#FFF solid 1px;
}
#tdheadingwit {
    width:140px;
    text-align:center;
    vertical-align:middle;
    background-color:#fff;
    height:100%;
    line-height:100%;
}
#tdheading2 {
    width:130px;
    padding:5px;
    text-align:center;
    vertical-align:middle;
    background-color:#163a48;
    font-weight:bold;
    color:#FFF;
    height:100%;
}
#tdgroen {
    width:186px;
    padding:2px;
    text-align:center;
    vertical-align:middle;
    background-color:#a3e021;
    height:100%;
}
#tdgroen2 {
    width:180px;
    padding:2px;
    text-align:center;
    vertical-align:middle;
    background-color:#a3e021;
    height:100%;
}
#tdgeel {
    width:186px;
    padding:2px;
    text-align:center;
    vertical-align:middle;
    background-color:#ffe71d;
}
#tdgeel_rand {
    width:190px;
    background-color:#000;
    height:100%;
    padding:0;
}
#tdgeel_inhoud {
    width:186px;
    padding:3px 2px 2px 2px;
    text-align:center;
    background-color:#ffe71d;
    height:22px;
    margin:0 2px 2px 2px;
    border-left:#FFF solid 1px;
    border-right:#FFF solid 1px;
    border-bottom:#FFF solid 1px;
}
#tdrood {
    width:190px;
    text-align:center;
    vertical-align:middle;
    background-color:#ff4f0a;
}
#randy {
    background-color:#000;
    width:2px;
}

Bedankt! En succes, mocht je een poging willen wagen.

Groeten,
Julius van der Kwast

kun je de tabel niet insluiten door 2 divjes ipv 1 waarvan de laatste een 1px witte rand heeft en height:100% width: 100% margin: 0 0 die je dan weer binnen de div met de zwarte rand zet ?

Misschien niet het antwoord op je vraag maar je gebruikt meerdere keren dezelfde #id, daarvoor zijn classes.

Code:

<table id="id">
<tr>
<td class="class"></td>
<td class="class"></td>
<td class="class2"></td>
<td class="class2"></td>
</tr>
</table>

verkeerd gelezen*

Wellicht heb je hier iets aan col en colgroup

en

http://www.quirksmode.org/css/columns.html

Bedankt voor de reacties!

Dank je Bjorn, aangepast.

http://genesiswebdesign.nl/dedrogeja...ce/concept.php

Oplossing:
Alle cellen in die kolom met de rand in een div zetten. Cel zwart maken, padding op 2 pixels, div binnen die cel de kleur geven van de cel (zwart, groen, geel) met een 1 pixel witte rand.

Bedankt Rens, jouw oplossing heeft gewerkt dus!

Groeten,
Julius van der Kwast