Probleme taille cellule tableau html
dimdoumouf
-
dimdoumouf -
dimdoumouf -
Bonjour,
j'ai un problème pour un tableau en html css,
le problème est que j'ai un tableau de largeur 900px avec dedans 9 cellule sur la première ligne qui font 150px pour la première et 100px pour les 8 suivantes. Donc le tableau retrecie mes cellules et je ne veut pas qu'il les retrecissent .
<div class="haut" id="haut" style=" overflow:hidden; white-space:nowrap; width: 900px; height:30px; margin:0px; padding:0px;">
<table >
<tr>
<td style="width:150px; ">Type</td>
<td style="width:100px; ">Composante</td>
<td style="width:100px;">Partenariat</td>
<td style="width:100px;">Nom Partenaire</td>
<td style="width:100px;">Attribué</td>
<td style="width:100px;">Commission </td>
<td style="width:100px;">Recrutable</td>
<td style="width:100px;">Visa Ens.</td>
<td style="width:100px"></td>
</tr>
</table>
</div>
j'ai un problème pour un tableau en html css,
le problème est que j'ai un tableau de largeur 900px avec dedans 9 cellule sur la première ligne qui font 150px pour la première et 100px pour les 8 suivantes. Donc le tableau retrecie mes cellules et je ne veut pas qu'il les retrecissent .
<div class="haut" id="haut" style=" overflow:hidden; white-space:nowrap; width: 900px; height:30px; margin:0px; padding:0px;">
<table >
<tr>
<td style="width:150px; ">Type</td>
<td style="width:100px; ">Composante</td>
<td style="width:100px;">Partenariat</td>
<td style="width:100px;">Nom Partenaire</td>
<td style="width:100px;">Attribué</td>
<td style="width:100px;">Commission </td>
<td style="width:100px;">Recrutable</td>
<td style="width:100px;">Visa Ens.</td>
<td style="width:100px"></td>
</tr>
</table>
</div>
A voir également:
- Probleme taille cellule tableau html
- Comment réduire la taille d'un fichier - Guide
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
3 réponses
Tu ne peux pas avoir un tableau de 900px, avec la largeur actuelle de tes cellules qui font en tout 950px de la large.
Soit tu rétrécie un peu tes cellules pour obtenir 900px en tout, soit tu augmente la taille de ta table.
Cordialement,
Sandrine
Soit tu rétrécie un peu tes cellules pour obtenir 900px en tout, soit tu augmente la taille de ta table.
Cordialement,
Sandrine
Oui je sais que la somme est plus grande que celle des cellule
mais voilà, je souhaiterai que mes cellule dépasse et sois même couper a la fin car après la div défile horizontalement en fonction d'une autre div contenant le tableau.
Je vous met le code si vous voulez
<tbody>
<tr>
<td style="width:300px;">Nom</td>
<td >
<div class="haut" id="haut" style=" overflow:hidden; white-space:nowrap; width: 900px; height:30px; margin:0px; padding:0px;">
<table >
<tr>
<td style="width:150px; ">Type</td>
<td style="width:100px; ">Composante</td>
<td style="width:100px;">Partenariat</td>
<td style="width:100px;">Nom Partenaire</td>
<td style="width:100px;">Attribué</td>
<td style="width:100px;">Commission </td>
<td style="width:100px;">Recrutable</td>
<td style="width:100px;">Visa Ens.</td>
<td style="width:100px"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top" >
<div class="gauche" id="gauche" STYLE="overflow: hidden; margin:0px; padding:0px;width: 300px; height:380px;">
<table>
<tr><td>ABMESELELEME Serge 1</td></tr>
</table>
</div>
</td>
<td valign="top" >
<div class="contenu" id="contenu" STYLE="overflow: scroll; width: 900px; margin:0px; padding:0px; height:400px;" onscroll="twAjusteDefillement(document.getElementById('contenu').scrollLeft,document.getElementById('contenu').scrollTop);">
<table style="display: block;">
<tr>
<td style="width:150px;">1 CEV SECT PRIVÉ </td>
<td style="width:100px;">MATMECA</td>
<td style="width:100px;">edza</td>
<td style="width:100px;">dzad</td>
<td style="width:100px;">3.00 </td>
<td style="width:100px;">dzad</td>
<td style="width:100px;">15/01/2009</td>
<td style="width:100px;">dzada</td>
<td style="width:100px;">MODIF</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
avec la fonction javascript appeler par onscroll:
function twAjusteDefillement(_position1,_position2) {
document.getElementById("haut").scrollLeft = parseInt(_position1);
document.getElementById("gauche").scrollTop = parseInt(_position2);
//alert(_position1);
}
et en faite dé que je fait défiler ma div contenu a l'aide des scrolls, soit la div gauche ou la div haut défile aussi. l'idée générale étant de faire un tableau avec les en-tête fixe quand on défile le tableau vers le haut et les noms (1ere colonne) fixe quand je défile vers la gauche. Mais lors d'un défilement vers le haut la 1ere colonne défile aussi et lors d'un défilement vers la gauche les en-tête défile aussi.
maintenant mon problème est que avec cette méthode de div qui sépare les en-tête du contenu les entête ne sont pas aligné avec les données des colonnes associé
mais voilà, je souhaiterai que mes cellule dépasse et sois même couper a la fin car après la div défile horizontalement en fonction d'une autre div contenant le tableau.
Je vous met le code si vous voulez
<tbody>
<tr>
<td style="width:300px;">Nom</td>
<td >
<div class="haut" id="haut" style=" overflow:hidden; white-space:nowrap; width: 900px; height:30px; margin:0px; padding:0px;">
<table >
<tr>
<td style="width:150px; ">Type</td>
<td style="width:100px; ">Composante</td>
<td style="width:100px;">Partenariat</td>
<td style="width:100px;">Nom Partenaire</td>
<td style="width:100px;">Attribué</td>
<td style="width:100px;">Commission </td>
<td style="width:100px;">Recrutable</td>
<td style="width:100px;">Visa Ens.</td>
<td style="width:100px"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top" >
<div class="gauche" id="gauche" STYLE="overflow: hidden; margin:0px; padding:0px;width: 300px; height:380px;">
<table>
<tr><td>ABMESELELEME Serge 1</td></tr>
</table>
</div>
</td>
<td valign="top" >
<div class="contenu" id="contenu" STYLE="overflow: scroll; width: 900px; margin:0px; padding:0px; height:400px;" onscroll="twAjusteDefillement(document.getElementById('contenu').scrollLeft,document.getElementById('contenu').scrollTop);">
<table style="display: block;">
<tr>
<td style="width:150px;">1 CEV SECT PRIVÉ </td>
<td style="width:100px;">MATMECA</td>
<td style="width:100px;">edza</td>
<td style="width:100px;">dzad</td>
<td style="width:100px;">3.00 </td>
<td style="width:100px;">dzad</td>
<td style="width:100px;">15/01/2009</td>
<td style="width:100px;">dzada</td>
<td style="width:100px;">MODIF</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
avec la fonction javascript appeler par onscroll:
function twAjusteDefillement(_position1,_position2) {
document.getElementById("haut").scrollLeft = parseInt(_position1);
document.getElementById("gauche").scrollTop = parseInt(_position2);
//alert(_position1);
}
et en faite dé que je fait défiler ma div contenu a l'aide des scrolls, soit la div gauche ou la div haut défile aussi. l'idée générale étant de faire un tableau avec les en-tête fixe quand on défile le tableau vers le haut et les noms (1ere colonne) fixe quand je défile vers la gauche. Mais lors d'un défilement vers le haut la 1ere colonne défile aussi et lors d'un défilement vers la gauche les en-tête défile aussi.
maintenant mon problème est que avec cette méthode de div qui sépare les en-tête du contenu les entête ne sont pas aligné avec les données des colonnes associé
