[HTML/CSS] tabelinhoud vult niet uit in firefox

[sQuarecoW]

Ik heb hier een beetje een irritant probleempje:

Ik heb een tabel die ik vanuit de css een width mee geef van 80% (tov van de pagincontainer). De kolommen geef ik geen width, want ik weet nooit van tevoren hoe breed de content wordt.

Nu werkt FF vooralsnog niet echt mee: de tabel krijgt wel een width van 80%, maar de inhoud dus niet. IE vult de inhoud wel 'netjes' uit.


Een en ander even geillustreerd:
in FF

en in IE


de relevante code:
de css definitie van de tabel (background-color even voor de duidelijkheid):

Cascading Stylesheet:

table {
width: 80%;
display: block;
padding: 5px;
margin: 0px auto;
border-top: solid 2px #c62c45;
border-bottom: solid 2px #c62c45;
background-color: #eee;
}

td {
padding: 2px;
padding-left: 5px;
padding-right: 5px;
vertical-align: top;
}

de tabel zelf:

HTML:

<table cellspacing="1">
<tr style="background-color: #fceb9e;height: 20px;">
  <td style="font-weight: bold;">Datum:
  </td>
  <td style="font-weight: bold;">Tijd:
  </td>
  <td style="font-weight: bold;">Voorganger:
  </td>
  <td style="font-weight: bold;">Bijzonderheid:
  </td>
  <td style="font-weight: bold;">Locatie:
  </td>
</tr>
<tr style="background-color: #a9cbf9;cursor: pointer;" onmouseover="style.backgroundColor='#ffffff';" onmouseout="style.backgroundColor='#a9cbf9';" onclick="window.location='index.php?action=editservice&amp;id=18&f';">
  <td>zondag 09 juli
  </td>
  <td>09:30
  </td>
  <td>Broeder Los
  </td>
  <td>&nbsp;
  </td>
  <td>&nbsp;
  </td>
</tr>
<tr style="background-color: #a9cbf9;cursor: pointer;" onmouseover="style.backgroundColor='#ffffff';" onmouseout="style.backgroundColor='#a9cbf9';" onclick="window.location='index.php?action=editservice&amp;id=18';">
  <td>&nbsp;
  </td>
  <td>16:30
  </td>
  <td>Ds. E. Brink
  </td>
  <td>&nbsp;
  </td>
  <td>&nbsp;
  </td>
</tr>

[moozzuzz]

Werkt het als je je tabel een vaste waarde meegeeft (0,8 * 900px = 720px) ? Waarom display block, ik geloof dat dit al standaard zo is?

\edit: misschien niet zo katholieke oplossing : wat als je td of tr op width:100% zet?

[ Voor 25% gewijzigd door moozzuzz op 23-06-2006 19:07 ]

[Boelie-Boelie]

offtopic:
moozzuzz schreef op vrijdag 23 juni 2006 @ 19:06:
edit: misschien niet zo katholieke oplossing

@moozzuzz: wist je dat TS een tabel maakt over kerkdiensten..?

Overigens kun je tabelheadings beter niet met <td style="font-weight: bold;"> doen maar met <th> en evt. stylen m.b.v. CSS (tekst in een th wordt al vanzelf bold overigens).
- Over toegankelijke tabellen
- Over tabellen vormgeven m.b.v. CSS

[sQuarecoW]

@moozzuzz: td {width: 100%;} werkt op zich wel.. alleen zou ik dan overal nowrap oid neer moeten zetten.. en dat is niet zo echt netjes (katholiek ) idd

@Boelie-Boelie: veel leerzame dingen inderdaad, en ik ga dat <th> nog even implementeren. Maar een oplossing voor mn probleem vind ik er niet...

[ Voor 5% gewijzigd door sQuarecoW op 23-06-2006 21:08 . Reden: typo ]

[sQuarecoW]

Niemand die hier iets op weet?

[Clay]

als je die display:block weghaalt werkt het gewoon. Die is ook nergens voor nodig.
De tr's hebben nu geen element met display:table meer om zich heen, en volgens de spec moet dat. De browser genereert dat vervolgens dan maar zelf, en omdat dat element niet uitvult (doet een table standaard niet), krijg je dat grijze vlak.

[ Voor 9% gewijzigd door Clay op 29-06-2006 13:09 ]

[sQuarecoW]

Owk dan! Dat was het inderdaad!

Ik moet me zoals gezegd nog eens flink gaan verdiepen in de table elementen van css.


Bedankt voor de hulp!