CSS Problème: Comment faire pour que les images dans un <table> faites d'images se touchent verticalement?

Dans la page Toggle Squares, j'ai une table faite d'un < img/> dans chaque cellule générée par JavaScript. J'ai appliqué le CSS suivant:CSS Problème: Comment faire pour que les images dans un <table> faites d'images se touchent verticalement?

.game, .game td, .game tr, .game img 
{ 
    border: none; 
    border-spacing: 0; 
    padding: 0; 
    margin: 0; 
}

Afin d'éliminer tout espacement. Cependant, maintenant j'obtiens une mince ligne d'espacement entre deux rangées adjacentes. Comment puis-je l'éliminer?

La page est un code XHTML + CSS valide.

Merci pour toute aide.

Cordialement,

Shlomi Fish.

Source

2009-05-12 Shlomi Fish

.game td img { 
display: block; 
}

Les images ont leur propre espace blanc

Source

2009-05-12 19:43:53

Merci! Cela a fait l'affaire. –

ajouter cellpadding = "0" et cellspacing = "0" à la table des attributs, ou essayez d'utiliser

border-collapse: collapse; 
border-width: 0;

à .. css

Source

2009-05-12 19:38:25

J'ai ajouté les attributs border-collapse et border-width au CSS et cela ne fonctionne toujours pas. (Firefox 3.0.x). –

qu'en est-il des attributs cellpadding et cellspacing? –

fixe:

.game, .game td, .game tr, .game img 
{ 
    border: none; 
    border-spacing: 0; 
    padding: 0; 
    margin: 0; 
    vertical-align: middle; 
}

Source

2009-05-12 19:43:17

cela semble être correct pour moi – Brabster

I a été en mesure d'obtenir l'effet que vous recherchez avec le code suivant:

Le code représente quatre jpegs unicolores juste à côté de l'autre formant un carré sans espace inbetween:

<html> 
<head> 
    <style> 
     td { margin 0px; padding: 0px;} 
     table { border-collapse:collapse;} 
    </style> 
</head> 
<body> 
    <table> 
     <thead /> 
     <tbody> 
      <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>     
      <tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr> 
     </tbody> 
    </table> 
</body>

Source

2009-05-12 19:44:58 AndreiM

Le problème est: l'image en ligne est traitée comme une lettre avec ascension = hauteur de l'image et descente = descente de la police. Cela signifie qu'une cellule de tableau contenant uniquement une image a une hauteur supérieure à la hauteur de l'image. Le moyen le plus simple de corriger cela est de mettre à zéro la hauteur de ligne pour toute la table supprimant ainsi la descente dans les lignes de texte ou de définir l'affichage: bloc pour toutes les images les déplaçant hors du contexte de mise en forme en bloc .

Source

2009-05-12 19:48:28

CSS Problème: Comment faire pour que les images dans un <table> faites d'images se touchent verticalement?

Répondre

Questions connexes