[XHTML/CSS] Tabel-breedte

[djc]

Op deze pagina (opgemaakt met behulp van deze CSS) heb ik een tabel staan. Deze wil echter (ondanks width: 100%;) niet net zo breed worden als mijn h3. Weet iemand daar een (CSS, liefst volgens de standaard) oplossing voor?

En is er een (CSS) manier om te voorkomen dat IE cellpadding="0" nodig heeft?

[crisp]

Manuzhai schreef op 09 december 2003 @ 00:29:
Op deze pagina (opgemaakt met behulp van deze CSS) heb ik een tabel staan. Deze wil echter (ondanks width: 100%;) niet net zo breed worden als mijn h3. Weet iemand daar een (CSS, liefst volgens de standaard) oplossing voor?

in IE is hij wel net zo breed; lijkt me een box-model probleempje dus

En is er een (CSS) manier om te voorkomen dat IE cellpadding="0" nodig heeft?

da's gewoon met padding op je td op te lossen; cellspacing los je op dmv border-collapse: collapse op je table

[djc]

crisp schreef op 09 december 2003 @ 00:35:
in IE is hij wel net zo breed; lijkt me een box-model probleempje dus

Maar waarom gaat het dan bij de table fout en bij h1 tot en met h6 of p niet?

[Willem]

<h>'s kennen geen border-collapse

_{zoals crips al zei}

[djc]

willem169 schreef op 09 december 2003 @ 09:18:
<h>'s kennen geen border-collapse

_{zoals crips al zei}

Die suggestie met border-collapse was erg nuttig voor het probleempje met de cellspacing (die ik bedoelde, niet cellpadding), maar ik weet nog steeds niet hoe ik het probleem met de breedte moet oplossen.

[Willem]

code:

<tr>
  <td style="width: 600px;">
    <a href="http://localhost/Blog/New/index.php/related.keyword/life/">life</a>
  </td>
  <td style="text-align: center;">163 posts</td>
</tr>

Je <h> is 818px breed en zie je td: 600px.. Volgens mij klopt er daar ook iets niet.

[djc]

Maar mijn table hoort naar 100% te gaan, op deze manier zou ie de tweede td toch gewoon moeten opvullen tot de table ook 818 is?

[Willem]

Waarom? Er staat toch geen container omheen die die breedte heeft?

[drm]

willem169:
Waarom? Er staat toch geen container omheen die die breedte heeft?

Wat dacht je van div#container?

Als je als box-model border-box neemt (zoals crisp wat cryptisch pleegt te zeggen) is je probleem opgelost:

Cascading Stylesheet:

* {
   box-sizing:border-box;
   -moz-box-sizing:border-box;
}

Even tussendoor: het is netter om in tabellen kolommen een classname (of evt. style) te geven dan elke cel zijn eigen class/style

HTML:

<table>
   <col class="link" />
   <col class="postcount" />
   <thead>
      <tr><th>Links</th><th>Post count</th></tr>
   </thead>
   <tbody>
      <tr>
         <td><a href="...">....</a></td>
         <td>169</td>
      </tr>
   </tbody>
</table>

iets van die strekking.

[djc]

Die box-model hielp wel, relaxed. Klopt het dat de boxjes nu inclusief border tot de breedte van width worden gerenderd, dus inclusief padding en border?

Wat betreft die <col>'s, ik heb dat even geprobeerd, maar het heeft niet het gewenste effect. Wat doe ik fout, of kan het niet zoals ik het nu doe (opnieuw geupload naar zelfde locatie)?

[edit] Overigens valt me nu pas op (maar zonder het veranderen van het box-model heeft ie het ook) dat in Firebird de linkerborder van de table verder naar links staat dan die van de h's, in IE niet. Ook nog suggesties hoe dat dan weer komt?

Pff, je zou zeggen dat het met zo'n simpel design makkelijk zou moeten zijn.

[ Voor 34% gewijzigd door djc op 09-12-2003 13:20 ]