18041 sujets

Questions générales et questions de débutants

[HTML/CSS] segmentation tableau

Bonjour,
dans le cadre d'un site full largeur, j'ai un tableau à une colonne avec un certains nombre de champs, la largeur du tableau est fixe.

Est-il possible possible de le segmenter, repartir à droite, rappeler la th (optionnel), et de continuer le listing?

attention:largeur de page variable, donc nombre de segmentation variable.

merci
Bonjour,

Oui il est possible de le segmenter, mais à condition d’être certain du nombre de champ. Si celui-ci est fixe il suffit de redimensionner la hauteur du listing, sinon il te faudra passer par du javascript en rajoutant une balise col à laquelle tu appliqueras la fonction split. Une fois le tableau segmenté il ne reste plus qu’à lui rajouter les th. Cela se fera avec une expression régulière du genre 
document.getElementById("monTableau").innerHTML = document.getElementById("monTableau").innerHTML.replace(new RegExp("<table>[\b]*<tr>[\b]*<td>(.*)</td>", "gi"),"<table><tr><th>$1</th>")
et encore je complique pour que ce soit plus simple, mais tu peux supprimer le th puisque c’est optionnel.
Vu que tu souhaites repartir de la droite et non de gauche à droite comme dans les écritures occidentales, je suppose que tu es en big indian left. Tu devras donc faire attention à ce que la redirection de la largeur de la page variable soit d’abord définie avant même la définition de la largeur de la segmentation variable. Si tu oublies cela tu risques de te retrouver avec le chat le plus courageux du monde porter des lunettes.
tu à mal compris, j'ai sa :

<table>
    <tr>
        <th><th>
    </tr>
    <tr>
        <td><td>
    </tr>
    <tr>
        <td><td>
    </tr>
etc...
    <tr>
        <td><td>
    </tr>
</table>


et j'aimerai un comportement similaire à cela : 


<table>
    <tr>
        <th><th>
    </tr>
    <tr>
        <td><td>
    </tr>
    <tr>
        <td><td>
    </tr>
etc...
    <tr>
        <td><td>
    </tr>
</table>

<table>
    <tr>
        <th><th>
    </tr>
    <tr>
        <td><td>
    </tr>
    <tr>
        <td><td>
    </tr>
etc...
    <tr>
        <td><td>
    </tr>
</table>

etc...

<table>
    <tr>
        <th><th>
    </tr>
    <tr>
        <td><td>
    </tr>
    <tr>
        <td><td>
    </tr>
etc...
    <tr>
        <td><td>
    </tr>
</table>


en admettant que j'ai 15 lignes dans le premier exemple.
j'aurai 5 ligne par tableau, si la page à une largeur permettant l'affichage de l'équivalent de 3 tableaux. Si la largeur de la page ne permet d'affiché que l'équivalent de 2 tableaux, alors j'aurais 8 ligne dans le tableau puis, 7 dans la segmentation, ainsi de suite.

ps: le nombre de ligne n'est pas déterminé, sa peut être 10 aujourd'hui, 500 demain.
ps2: si je part à droite après segmentation, c'est que je viens de la gauche, gauche-droite, occidentale.
Modifié par alucka (08 May 2012 - 20:29)
Voici un code que j’ai testé sous firefox12 :
Fichier couperTableau.html :

<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Couper le tableau</title>
</head>
<body>
	<table id="tableauACouper">
		<tr><th>1<th></tr>
		<tr><td>2<td></tr>
		<tr><td><span>auie </span>3<td></tr>
		<tr><td>4<td></tr>
		<tr><td>5<td></tr>
		<tr><td>6<td></tr>
		<tr><td>7<td></tr>
		<tr><td>8<td></tr>
		<tr><td>9<td></tr>
		<tr><td>10<td></tr>
		<tr><td>11<td></tr>
		<tr><td>12<td></tr>
		<tr><td>13<td></tr>
		<tr><td>14<td></tr>
		<tr><td>15<td></tr>
		<tr><td>16<td></tr>
		<tr><td>17<td></tr>
		<tr><td>18<td></tr>
		<tr><td>19<td></tr>
		<tr><td>20<td></tr>
		<tr><td>21<td></tr>
		<tr><td>22<td></tr>
		<tr><td>23<td></tr>
		<tr><td>24<td></tr>
		<tr><td>25<td></tr>
		<tr><td>26<td></tr>
		<tr><td>27<td></tr>
	</table>
	<script type="text/javascript" src="couperTableau.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>


Fichier couperTableau.js placé dans le même répertoire :
var largeurTableau = 200, // Largeur du tableau en pixels
repeterPremiereLigne = true; // Si vrai la première ligne est reprise dans chaque tableau créé.

window.onload =  function(){
	"use strict";
	var largeurFenetre = $("body").width(),
	nombreDeTableaux = Math.ceil(largeurFenetre / largeurTableau),
	nombreDeLignesTableauInitial = $('#tableauACouper tr').length,
	nombreDeLignesSousTableau,
	iLigneTableauInitial,
	iTableau,
	res = "",
	interieurPremiereLigne;
	if (repeterPremiereLigne) {
		interieurPremiereLigne = $('#tableauACouper tr:first').html();
		nombreDeLignesTableauInitial -= 1;
		iLigneTableauInitial = 1;
	} else {
		iLigneTableauInitial = 0;
	}
	nombreDeLignesSousTableau = nombreDeLignesTableauInitial / nombreDeTableaux;
	// Pour chaque sous tableau
	for (iTableau = 0; iTableau < nombreDeTableaux; iTableau += 1) {
		res += "<table style='position:absolute;width:" + largeurTableau + "px;left:" + Math.floor(iTableau * largeurTableau) + "px'>";
		if (repeterPremiereLigne) {
			res += interieurPremiereLigne;
		}
		// Pour chaque ligne d’un sous tableau
		for (; iLigneTableauInitial < (iTableau + 1) * nombreDeLignesSousTableau; iLigneTableauInitial += 1) {
			res += "<tr>" + $('#tableauACouper tr:eq(' + iLigneTableauInitial + ')').html() + "</tr>";
		}
		res += "</table>";
	}
	document.getElementById('tableauACouper').style.display = "none";
	$('#tableauACouper').after(res);
};
Veux-tu obligatoirement un tableau ?

Sinon, je pense que l'utilisation des nouvelles propriétés CSS column-count et column-width pourraient être utilisables pour ce que tu souhaite faire.
bonjour,
merci pour vos réponses.

@adrien881: le faire en js, j'y avais pensé, mais bon c'est plus lourd en code et en chargement.

@Naemesis: propriété interressante, il me semble que je l'avais vu pour faire du formatage de texte type article de journal, mais je m'en souvenais pu.Malheuresement, il y en a encore un qui à décider de me faire CHI** (on le nomme même plus, mais maintenant c'est la V9 qui est lente à adopté le CSS3).Deplus, mais c'est peut-être par ce que je n'ai pas plus cherché, j'obtenais des espaces non voulu, gap à 0 ou 1px.

si vous connaissez une manière de le faire en HTML/CSS uniquement et qui est compatible touts navigateurs, je suis intéressé.
Bonjour alucka,

j'ai bien lu ton exposé sur le découpage d'un tableau mais je n'ai pas bien compris la problématique.
D'une part, tu parles de pleine écran et d'autre part d'un tableau à une colonne contenant plusieurs champs.
Mais qu'est-ce que tu veux segmenter ? Je ne comprends pas ce que tu cherches à faire.

A vrai dire, je ne comprends pas les conditions de la segmentation de ton tableau en fonction de la largeur et de la hauteur de ta page.

Et si on commençait par le début ?

Est-ce que les données de ce tableau sont extraites d'un table MySql ?
Pourquoi as-tu mis tous les champs dans l'unique colonne de ton tableau ?
Et ne serait-il pas plus judicieux de mettre l'en-tête de ta colonne en position fixe dans la page ?
Ainsi elle sera toujours visible pour l'utilisateur qui pourra se déplacer dans la page avec le scrolling (ascenseur).

Et n'aurais-tu pas un lien à nous donner pour comprendre ton problème ?
Je crois qu'il n'est pas nécessaire de faire du Javascript car ton problème est une question de présentation.

@+
Sujet clos
Aller à