table design CSS ne fonctionne pas

Je possède ce tableau:table design CSS ne fonctionne pas

<table style="width: 512px; border-collapse: collapse;" cellspacing="0"> 
<tbody> 
<tr> 
<td style="background: #00f; height: 9px; width: 9px;"></td> 
<td style="background: #0f0; height: 9px;"></td> 
<td style="background: #f00; height: 9px; width: 9px;"></td> 
</tr> 
</tbody> 
</table>

S'il vous plaît pas "ne pas utiliser les tables" genre de messages. J'utilise des tableaux ici pour plus de clarté, en essayant de résoudre mon problème.

Le problème est que je vois le résultat que http://ioj.com/v/if64c

Où se trouve la ligne verte? Il devrait être 496x9!

Source

2010-07-10 Tower

Essayez d'ajouter un ' ' à l'intérieur des cellules. Parfois, les navigateurs deviennent un peu géniaux s'ils voient des cellules vides. –

"Pour plus de clarté" ..? – You

Je l'ai essayé sur FF 3.6.6, et ça a l'air bien. Quel navigateur est à l'origine du problème? – melhosseiny

Si vous ajoutez

table-layout: fixed;

à la table de css, cela fonctionne.

(ref here)

En effet, les tables seront la largeur des colonnes auto-calculera basé sur le contenu de la cellule par défaut.

Source

2010-07-10 14:47:31 sje397

Oui, utilisez 'table-layout: fixed' dans la mesure du possible. Il est plus rapide à rendre et beaucoup plus prévisible que l'algorithme de mise en page de table par défaut. – bobince

Je ne savais pas à ce sujet, cela résout également d'autres problèmes que j'ai eu avec les tables plus tôt! Merci beaucoup pour cette merveilleuse réponse. :) – Tower

<table style="width: 512px; border-collapse: collapse;" cellspacing="0"> 
<tbody> 
<tr> 
<td style="background: #00f; height: 9px; width: 9px;"></td> 
<td style="background: #0f0; height: 9px; width: 9px;"></td><!-- use specific width --> 
<td style="background: #f00; height: 9px; width: 9px;"></td> 
</tr> 
</tbody> 
</table>

Source

2010-07-10 14:51:44 Sadat

Répondre

Questions connexes