[XHTML/CSS] Tabel-breedte

Pagina: 1
Acties:

  • djc
  • Registratie: December 2001
  • Laatst online: 08-09-2025
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?

Rustacean


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:55

crisp

Devver

Pixelated

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

Intentionally left blank


  • djc
  • Registratie: December 2001
  • Laatst online: 08-09-2025
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?

Rustacean


  • Willem
  • Registratie: Februari 2001
  • Laatst online: 16:40
<h>'s kennen geen border-collapse :)

zoals crips al zei :P

Motor (of auto) onderhoud bijhouden


  • djc
  • Registratie: December 2001
  • Laatst online: 08-09-2025
willem169 schreef op 09 december 2003 @ 09:18:
<h>'s kennen geen border-collapse :)

zoals crips al zei :P
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.

Rustacean


  • Willem
  • Registratie: Februari 2001
  • Laatst online: 16:40
code:
1
2
3
4
5
6
<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. :)

Motor (of auto) onderhoud bijhouden


  • djc
  • Registratie: December 2001
  • Laatst online: 08-09-2025
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?

Rustacean


  • Willem
  • Registratie: Februari 2001
  • Laatst online: 16:40
Waarom? Er staat toch geen container omheen die die breedte heeft? :)

Motor (of auto) onderhoud bijhouden


  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

drm

f0pc0dert

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:
1
2
3
4
* {
   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:
1
2
3
4
5
6
7
8
9
10
11
12
13
<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.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz


  • djc
  • Registratie: December 2001
  • Laatst online: 08-09-2025
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. :X

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

Rustacean

Pagina: 1