Problème marge entre cellules tableau html

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention -
xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention - 12 janv. 2011 à 15:29

Bonjour, j'ai fais un tableau en html mais entre chaque cellule, j'ai un petit espace blanc et pour des raisons esthétique, je souhaiterais l'enlever or, j'ai regardé partout où pouvait venir cette option d'espacement mais je n'ai pas trouvé.

J'ai donc procédé en supprimant des parties de mon tableau pour voir, maintenant j'arrive avec un tableau quasiment vide, mon fichier CSS vide et j'ai toujours ces espacements et ça m'embête, ca fait plusieurs heures que je cherche.

Voilà mes deux fichiers:
final.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulaire</title>
<link rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


<script type="text/javascript">

$(document).ready(function()
{
	//Configuration
	//var retour = true;
	var tempsTransition = 1000;
	var currentPosition = 0;
	var slideWidth = 590;
	var slides = $('.slide');
	var numberOfSlides = slides.length;
	var interval;

	// Supprime la scrollbar en JS
	$('#slidesContainer').css('overflow', 'hidden');

	// Attribue #slideInner à toutes les div .slide
	slides.wrapAll('<div id="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
	'float' : 'left',
	'width' : slideWidth
	});

	// Longueur de #slideInner égale au total de la longueur de tous les slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);



	$('#slidesContainer div.slide input').click(function()
	{
		// Determine la nouvelle position
		currentPosition = 1;
		// On va sur le deuxième slide
		if( $(this).attr('id') == "rightControl" )
		{
			//var choixConsommation = getValueConnais();
			//if(choixConsommation == 3)
			//{
				//var simulationElectricite = getValueSimulationElectricite();
				//var simulationGaz = getValueSimulationGaz();
				//if( (simulationElectricite != 0) || (simulationGaz != 0) )
				//{
					go();
					mooveSlide(slideWidth, tempsTransition, currentPosition);
			
		}else if( $(this).attr('id') == "leftControl" )
		{
			currentPosition = 0;
			// Fais bouger le slide
			mooveSlide(slideWidth, tempsTransition, currentPosition);
		}
		
	});

});
		
function getHttp()
{
	var objet_http = null;
	// Création de l'objet XMLHttpRequest
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		objet_http=new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{// code for IE6, IE5
  		objet_http=new ActiveXObject("Microsoft.XMLHTTP");
  	}else
  	{
		alert("Votre naviguateur ne supporte pas les objets XMLHttpRequest..");
		return ;
  	}
  	return objet_http;
}

function getDatas()
{
	var donnees = null; 
	return "";
}


function go()
{
	// Récupération de notre objet XMLHttpRequest
	var http = getHttp();
	// Récupération des éléments du formulaires
	var datas = getDatas();
				
	// Envoi des données
	http.open("POST","appli2.php",true);
		
	// Récupération du formulaire de comparaison et MAJ de la page
	http.onreadystatechange=function()
	{
		if (http.readyState==4 && http.status==200)
    	{
    		document.getElementById("blop").innerHTML=http.responseText;
    	}
	}

	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	http.send(datas);
}



function mooveSlide(slideWidth, tempsTransition, position)
{
	$('#slideInner').animate(
			{
				'marginLeft' : slideWidth*(-position)
			},tempsTransition);	
}


</script>

<html>
<body>

<div id="slideshow">
  
  <div id="slidesContainer">
    
    <div class="slide" id="slide1">
		
		<input type="image" src="images/apres.PNG" id="rightControl" class="apres" />
		
    </div>
    
    <div class="slide" id="slide2">
      <div id="blop">
      </div>
       	<input type="image" src="images/avant.PNG" id="leftControl" />
    </div>
    
    
    
  </div>
</div>
</body>
</html>

appli2.php

<?php

function afficheResultat()
{
	$affichage = "";
	// Si l'économie est positive, on affiche une ligne de couleur
	$affichage = "<tr bgcolor='green'>
				  	<td>1</td>
				  	<td>2</td>
				  	<td>3</td>
				  	<td>4</td>
				  	<td>5</td>
				  	<td>6</td>
				  	<td>7</td>
				  	<td>8</td>
				  </tr>";
	return $affichage;
}

// Création du tableau
				echo("<table >
	  				  	<tr bgcolor='green'>
	  				  		<td>1</td>
	  				  		<td>2</td>
	  				  		<td>3</td>
	  				  		<td>4</td>
	  				  		<td>5</td>
	  				  		<td>6</td>
	  				  		<td>7</td>
	  				  		<td>8</td>
	  				  	</tr>
					  ");
			
		for ($i=0;$i<8;$i++)
{
	echo afficheResultat();
}

// Fermeture du tableau
echo("</table>");
?>

Pour avoir l'effet slide, il faut télécharger un fichier qui se trouve ici: http://www.snoupix.com/slideshow-jquery-accessible_tutorial_28.html

Que puis-je faire svp?

Afficher la suite

A voir également:

Problème marge entre cellules tableau html
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Tableau croisé dynamique - Guide
Editeur html - Télécharger - HTML

5 réponses

Réponse 1 / 5

xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention 15

montre moi le code du resultat... lorsque tu deploie ta page.

sinon je pense que du CSS devrait resoudre ton probleme

Réponse 2 / 5

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention 44

Je ne peux pas montrer le code déployé (à ma connaissance) comme il y a une requête AJAX, donc le tableau qui est mis après n'existe pas lors de la création du code du résultat.

Voilà l'image de ce que j'obtiens:
http://nsa26.casimages.com/img/2011/01/12/110112012522264811.png

Réponse 3 / 5

xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention 15

sorry j'ai pas observer attentivement ton code... j'ai cru voir trop de code php cc'est pour cela:

essaye ceci dans tons fichier CSS

table
  {
    border-collapse: collapse;
  }

Réponse 4 / 5

Absot Messages postés 777 Date d'inscription Statut Membre Dernière intervention 44

Tout de suite ca va mieux.. xD

En plus, d'habitude, je le fais tout le temps pour mes tableaux mais là, je n'y ai pas pensé.

Je voudrais que certaines lignes soit avec le border-collapse:collapse mais pas d'autres, j'ai essayé en appelant une class avec cette propriété pour les lignes où je veux qu'elles le soient mais ça ne fonctionne pas, ce n'est pas possible?

Pour faire simple, je voudrais qu'une ligne sur deux soit en border-collapse:collapse

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

xamurai Messages postés 223 Date d'inscription Statut Membre Dernière intervention 15

function afficheResultat($b)
{
	$affichage = "";
	// Si l'économie est positive, on affiche une ligne de couleur
	$affichage = "<tr bgcolor='green' class=\"".(($b == true)? "tr2":"" )."\">
				  	<td>1</td>
				  	<td>2</td>
				  	<td>3</td>
				  	<td>4</td>
				  	<td>5</td>
				  	<td>6</td>
				  	<td>7</td>
				  	<td>8</td>
				  </tr>";
	return $affichage;
}

CSS

table
  {
    border-collapse: collapse;
  }
  .tr2
  {
    border-top : solid 1px #ffffff;
    border-bottom : solid 1px #ffffff;
  }

l'appel

for ($i=0;$i<8;$i++)
{
	echo afficheResultat(($i%2 == 0));
}

Discussions similaires

Formule taux de marque

Calculer une remise % par rapport à une % et une marge %

Votre réponse

Discussions similaires