Tableau entre table-layout et les valeurs des TD

[aelmalki]

Bonjour,

Je viens vers vous pour vous exposer le problème que je rencontre dans IE8.

Je dois fixer une colonne à une valeur de pixel X et ce en gardant toujours l’affichage de son contenu : voir exemple W3SCHOOLS: http://www.w3schools.com/Css/tryit.a...e_table-layout

Pour le deuxième tableau, comme vous le constater en utilisant « table-layout :fixed » j’obtiens la fixation de la taille souhaité, mais quand les données du TD sont assez important, il ya a un chevauchement entre les valeurs des TD.

J’espère avoir une solution pour que je puisse fixer les tailles de mes TD et les élargir s’ils contiennent un nombre assez important de caractères (un mélange entre l'exemple du tableau 1 et le tableau 2 de l'exemple W3SCHOOLS).

Merci beaucoup, et je reste disponible pour toutes autres explications.

[Bisûnûrs]

Heuuu, tu leur donnes juste une largeur et ce que tu souhaites est le comportement normal des cellules d'un tableau.

[aelmalki]

Merci beaucoup pour ton retour, mais je n'ai pas trop compris ce que vous voulez dire !

Est ce que vous pouvez m'expliquer d'avantage ?

Merci par avance.

[Bisûnûrs]

Code :

1
2
3
4
5
<table border="1">
   <tr>
      <td width="150">000</td>
   <tr>
</table>

Ici la cellule fera 150px.

Code :

1
2
3
4
5
<table border="1">
   <tr>
      <td width="150">00000000000000000000000000000000000</td>
   <tr>
</table>

Ici la cellule s'adaptera à son contenu.

[aelmalki]

Oui, je comprend. ça c'est le comportement normal d'un tableau puisque l'algorithme de fixation par défaut le permet (table-layout:auto)

Par contre moi je dois répondre à deux exigence à la fois :

1- Mettre des tailles fixes pour les TD en utilisant table-layout:fixed : ceci me permettra de d'avoir un tableau avec des colonnes fixes quelque fois la nombre de colonne (activer le scrool barre horizontal de l'écran)
2- Les valeurs des TD ne doivent pas être limités aux widths déja fixés

Je sens que c'est un peu contradictoire mais c'est le nombre de colonne de mon tableau qui me cause problème.

Merci par avance.

[Bovino]

Envoyé par aelmalki

Je sens que c'est un peu contradictoire

Pour le moins

Donc tu veux une largeur fixe mais pas fixe, c'est ça ?

[Bisûnûrs]

Dans ce cas là tu peux utiliser la propriété CSS min-width qui devrait faire ce que tu veux.

Code :

1
2
3
4
5
6
7
8
9
10
11
<table border="1">
  <tr>
    <td style="min-width:300px;">000000000000</td>
    <td style="min-width:300px;">000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</td>
    <td style="min-width:300px;">000000000000</td>
    <td style="min-width:300px;">000000000000</td>
    <td style="min-width:300px;">000000000000</td>
    <td style="min-width:300px;">000000000000</td>
    <td style="min-width:300px;">000000000000</td>
  </tr>
</table>

[Bovino]

Envoyé par Bisûnûrs

Dans ce cas là tu peux utiliser la propriété CSS min-width qui devrait faire ce que tu veux.

min-width n'est pas sensé fonctionner sur un td il me semble

[Bisûnûrs]

Je viens de faire le test et ça fonctionne (Firefox 3.6.12).

[andry.aime]

Bonjour,

min-width et max-width n'est pas supporté par IE6 et IE8 .

A+.

[aelmalki]

Oui...ça ne marche pas sur IE8 malheureusement

Microsoft commence à me rendre malade un peu.

Si non aucune autre proposition pour mon problème...quelque chose qui marche sur IE ?

Merci beaucoup pour votre aide.

[Bovino]

Code css :

1
2
3
td{
overflow-x: scroll;
}

[aelmalki]

Je pense qu'il aura un impact négatif sur l'ergonomie du tableau et de la page, mais c'est une bonne idée quand même, merci beaucoup.

J'essaye de chercher commet pourrais je sortir de cette impasse,

En attente de vos propositions !

Bien à vous.

[Bovino]

Envoyé par aelmalki

J'essaye de chercher commet pourrais je résoudre cet impasse

Mais est-ce que tu te rends compte que sauf mauvaise compréhension de ma part, tu cherches à avoir une largeur à la fois fixe ET variable !
Ce n'est tout simplement pas possible, c'est comme demander à une voiture de pouvoir tourner en même temps à droite et à gauche...

[aelmalki]

Ce qui me pause problème c'est que IE6 arrive à simuler ce traitement : le tableau s'affiche avec des widths fixes, et si une des valeur des TD est grande, le TD s'adapte à la taille de cette chaîne (la chaîne ne doit pas avoir d'espace exemple : "ABCDEFGHIJKLMNO")

Suite a une migration vers IE8, je dois reprendre le même traitement, chose qui n'est apparemment pas si facile...voir même impossible comme vous dites.

Merci beaucoup.

[Bisûnûrs]

Au pire, pour le min-width sur IE il suffit de passer par un script Javascript qui l'émule :
http://www.doxdesk.com/software/js/minmax.html

[aelmalki]

Apparemment ça ne marche pas pour les tableaux.
J'ai pris votre exemple et j'ai ajouté le script minmax.js mais le résultat est toujours le même

[aelmalki]

Solution de contournement : j’ai ajouté des &nbsp ; au début et à la fin du texte de la colonne pour que sa taille soit comme en IE6.

Je ne sais pas si c’est propre ou non, mais ça resoud pour le moment mon problème.