Cellules de tableau plus grandes que ce qu'elles sont censées être

Question

J'ai créé un système de carte pour un jeu qui fonctionne sur le principe de dessiner l'image de la carte à partir de tuiles.Il y a de nombreuses raisons à cela que je n'aborderai pas ici mais si vous voulez vraiment savoir, je suis sûr que vous pouvez trouver comment me contacter ;)

J'ai a mis en ligne la dernière version afin que vous puissiez voir exactement où se situe le problème et sa source.Le problème est la ligne entre les 2 tuiles du haut et les 2 tuiles du bas, je n'arrive pas à comprendre pourquoi ça s'est passé comme ça et toute aide serait appréciée.

Dans la source se trouve un marqueur appelé "stackoverflow". Si vous recherchez "stackoverflow" lors de la visualisation de la source, il devrait vous amener à la table en question.

J'ai également téléchargé un image du problème.

Answer 1

Je pense que tu dois utiliser display: block sur vos images.Quand les images sont inline il y a un peu d'espace supplémentaire pour l'espacement des lignes.

Answer 2

Vous pouvez également ajuster la hauteur de ligne de l'élément td :

td {
    line-height: 0
}

Answer 3

Je sais que cela peut paraître mauvais, mais vous devez vous assurer qu'il n'y a pas d'espace entre votre fin. <img> tag et le début de la fin </td> étiqueter.

c'est à dire.Ce qui suit présentera le problème :

<td>
 <img src="image.jpg"/>
</td>

Et ce ne sera pas :

<td><img src="image.jpg"/></td>

J'espère que cela pourra aider.

Modifier:OK, ce n'était pas du tout la solution.oh!

Answer 4

Je n'ai pas tout cherché, mais le problème réside quelque part dans les feuilles de style.

Si vous en copiez uniquement la partie tableau, la carte s'affiche correctement.

Si vous supprimez la finale </span> balise de cette partie, cela fonctionne également (cependant la page est mélangée) :

<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">

<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">

Essayez donc depuis le début avec le CSS ou essayez de les supprimer un par un, pour voir quelle est la cause du problème.