Sujet Précédent Sujet Suivant

Problème marge entre cellules tableau html

Fermé
Absot Messages postés 777 Date d'inscription mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 - 12 janv. 2011 à 12:57
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 - 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?

A voir également:

5 réponses

Réponse 1 / 5
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
12 janv. 2011 à 13:18
montre moi le code du resultat... lorsque tu deploie ta page.

sinon je pense que du CSS devrait resoudre ton probleme
0
Réponse 2 / 5
Absot Messages postés 777 Date d'inscription mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 44
12 janv. 2011 à 13:22
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
0
Réponse 3 / 5
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
12 janv. 2011 à 13:29
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;
  }
0
Réponse 4 / 5
Absot Messages postés 777 Date d'inscription mardi 28 octobre 2008 Statut Membre Dernière intervention 4 septembre 2020 44
12 janv. 2011 à 14:52
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
0

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 mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
12 janv. 2011 à 15:29 
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));
}
0

Discussions similaires

Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
Tableau croisé dynamique - absence de certaines données
crazyrider71 -
Hana -

4 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses