Sujet Précédent Sujet Suivant

Répartition égale colonnes tableau css

Fermé
Utilisateur anonyme - 4 juin 2012 à 11:13
 Bob - 2 avril 2015 à 14:41
Bonjour,

Je fais des recherches depuis 2 jours sans succès après toutes les tentatives que essayées tant bien mal dans le CSS que dans la page HTML.

J'ai un tableau (un menu) défini en % dans la page HTML et je souhaite le mettre en pixels et dans le CSS. Déjà le simple fait de le passer dans le HTML le tableau en pixels fait que les colonnes ne sont plus égales (c.a.d qu'elles prennent la taille du mot le plus long par colonne) et quand en plus je passer les valeurs dans le CSS, que ce soit en pixels ou en % le résultat est le même : taille de colone = taille du mot le plus long.
En résumé, mon seul moyen pour que mon tableau soit bien proportionné c'est de mettre dans le code HTML les valeurs en %.

Second problème du même genre, lors du hover mon menu se déroule vers le bas mais là impossible de trouver la combinaison (soit HTML, soit CSS, soit px, soit %, soit dans <tr>, soit dans le <table>, etc...) qui me permet de mettre mon div (puisque c'est effectivement un div apparent) en pixels = pixels de la colonne.

Si vous pouviez m'aider ce serait vraiment cool (:

16 réponses

Réponse 1 / 16
Bob
2 avril 2015 à 14:41
table-layout:fixed;
3
Réponse 2 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 11:41
Salut,

Normalement en fixant la taille des éléments via le CCS ça devrait le faire..non? 
td{
width:200px;
}
0
Réponse 3 / 16
Utilisateur anonyme
4 juin 2012 à 13:15
Non bien évidemment j'ai déjà essayé cela.
0
Réponse 4 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 14:05
C'est étonnant..quand je fais : 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>tableau</title>
  <style type="text/css">
table{
width:600px;
border:1px solid black;
}
td{
width:200px;
border:1px solid red;
}
  </style>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>
      <p>Atque, ut Tullius ait, ut etiam ferae fame monitae
plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita
homines instar turbinis degressi montibus impeditis et arduis loca
petivere mari confinia, per quae viis latebrosis sese convallibusque
occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum
solido splendore fulgente nauticos observabant quos cum in somnum
sentirent effusos per ancoralia, quadrupedo gradu repentes seseque
suspensis passibus iniectantes in scaphas eisdem sensim nihil
opinantibus adsistebant et incendente aviditate saevitiam ne cedentium
quidem ulli parcendo obtruncatis omnibus merces opimas velut viles
nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</p>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>
      <p>Atque, ut Tullius ait, ut etiam ferae fame monitae
plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita
homines instar turbinis degressi montibus impeditis et arduis loca
petivere mari confinia, per quae viis latebrosis sese convallibusque
occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum
solido splendore fulgente nauticos observabant quos cum in somnum
sentirent effusos per ancoralia, quadrupedo gradu repentes seseque
suspensis passibus iniectantes in scaphas eisdem sensim nihil
opinantibus adsistebant et incendente aviditate saevitiam ne cedentium
quidem ulli parcendo obtruncatis omnibus merces opimas velut viles
nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</p>
      </td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
      <p>Atque, ut Tullius ait, ut etiam ferae fame monitae
plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita
homines instar turbinis degressi montibus impeditis et arduis loca
petivere mari confinia, per quae viis latebrosis sese convallibusque
occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum
solido splendore fulgente nauticos observabant quos cum in somnum
sentirent effusos per ancoralia, quadrupedo gradu repentes seseque
suspensis passibus iniectantes in scaphas eisdem sensim nihil
opinantibus adsistebant et incendente aviditate saevitiam ne cedentium
quidem ulli parcendo obtruncatis omnibus merces opimas velut viles
nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</p>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

...les colonnes du tableau font la même largeur.
0

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

Posez votre question
Réponse 5 / 16
Utilisateur anonyme
4 juin 2012 à 14:28
Personnellement elles ne font pas du tout le même largeur mais seulement quand je mets en %.
0
Réponse 6 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 14:31
Dans ce cas, vous un bug autre part ou un style css qui interfère sur le tableau.
0
Réponse 7 / 16
Utilisateur anonyme
4 juin 2012 à 14:39
Page HTML :

<!-- div du menu qui apparaît lors du passage de la souris -->
<div id="divMenuLeCentre">
<table border="0" width="100%" height="100%">
<tr>
<td class="celMenu">Menu 1</td>
</tr>
<tr>
<td class="celMenu">Menu 2</td>
</tr>
<tr>
<td class="celMenu">Menu 3</td>
</tr>
<tr>
<td class="celMenu">Menu 4</td>
</tr>
<tr>
<td class="celMenu">Menu 5</td>
</tr>
</table>
</div>


Page CSS :

#divMenuLeCentre
{
/*positionnement*/
position: absolute;
width: 14%; /*largeur*/
height: 158px; /*hauteur*/
top: 255px;
left: 28.8%;
-webkit-border-radius: 5px; /*arrondissement des coins*/
z-index: 3;

/*police & style*/
text-align: center;
font-family: DejaVu Sans;
font-size: 14px;
font-weight: bold;
background-color: #B80024;
border: rgba(255, 255, 255, 0.2) 1px solid;
color: white;
text-shadow: black 1px 1px, black -1px 1px, black -1px -1px, black 1px -1px;
}

#divMenuLeCentre td:hover
{
background-color: rgba(255, 255, 255, 0.1);
border: rgba(255, 255, 255, 0.2) 1px solid;
-webkit-border-radius: 5px; /*arrondissement des coins*/
cursor: pointer;
}



Qu'est ce qui interfère ?
0
Réponse 8 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 15:08
J'ai repris votre code, changé les % en px en adaptant bien-sur les dimensions et je ne rencontre pas de soucis particulier.

Si un mot est trop long, soit il sort de la cellule soit il passe à la ligne. Dans aucun cas il ne pousse la cellule.

Note : testé sous IE9, Firefox et Chrome.

Note bis : votre menu est super bizarre..pourquoi utiliser un tableau au lieu d'utiliser une liste?
0
Réponse 9 / 16
Utilisateur anonyme
4 juin 2012 à 15:23
Moi j'ai les cellules non identiques... Je ne comprend pas.

Oui mais mon menu est en réalité un sosu-menu et au survol de la souris cela devient en surbrillance c'est pour cela que j'ai besoin d'un tableau pour les cases qui changent de couleur.
0
Réponse 10 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 15:30
J'ai rien compris à votre réponse par apport au sous-menu et cases qui changent de couleur..?
Ceci dit, voici un menu vertical un peut comme le votre mais avec une liste..si ça peut vous aidez! 
  
<style type="text/css">
#cadre {
border: 1px solid #000;
width: 150px;
}
ul {
list-style-type : none;
padding : 0;
margin:0;
}
#cadre li a {
text-decoration : none;
background :#D5F4FF;
color : #000;
display: block;
}
#cadre li a:hover {
text-decoration : none;
background :red;
color : #000;
}
  </style>

<div id="cadre">
<ul>
  <li><a href="#">Lien 0</a></li>
  <li><a href="#">Lien 1</a></li>
  <li><a href="#">Lien 2</a></li>
  <li><a href="#">Lien 3</a></li>
</ul>
</div>
0
Réponse 11 / 16
Utilisateur anonyme
4 juin 2012 à 16:53
Oui mais le problème est que j'ai besoin d'un tableau et non d'une liste.
0
Réponse 12 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 16:56
Vous avez un lien ou on peut voir le soucis parce que la je ne pige pas ou est le problème?
0
Réponse 13 / 16
Utilisateur anonyme
4 juin 2012 à 17:30
Non je fais ça en local et il y a tut mon code dedans, je ne préfère pas diffuser le contenu pour le moment.

Je ne comprend pas, c'est pourtant étrange que les cellules se redimensionnent à une taille non définie comme telle...
0
Réponse 14 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 17:41
La je ne peut plus vous donnez de solutions car mes testes sur vos bouts de codes donnés plus haut fonctionnent chez moi. Vous utilisez quelle navigateur pour visualiser le résultat?
0
Réponse 15 / 16
Utilisateur anonyme
4 juin 2012 à 17:43
J'utilise google chrome.

Oui mon code fonctionne, MAIS dans le html. Je veux le passer dans le CSS. Seulement le problème est que UNIQUEMENT les % fonctionnent...

Je ne sais pas quoi faire de plus...
0
Réponse 16 / 16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
4 juin 2012 à 17:53
Je ne comprend pas votre histoire de HTML que vous voulez faire passer dans le CSS?
Ensuite, passer de % en px, je ne vois pas le soucis..faut juste ré adapter les dimensions.
0

Discussions similaires

ou sont les bananes ?
Liline -
Le Pro -

2 réponses
Tableau croisé dynamique : différence entre deux colonnes
jds2016 -
sal -

6 réponses
liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses
Tableau croisé dynamique avec plusieurs en-têtes identiques
RisingStar84 -
danielc0 -

1 réponse
Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
Utilisateur anonyme -
TomH. -

13 réponses