Répartition égale colonnes tableau css
Utilisateur anonyme
-
Bob -
Bob -
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 (:
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 (:
A voir également:
- Répartition égale colonnes tableau css
- Tableau word - Guide
- Tableau ascii - Guide
- Formule moyenne excel plusieurs colonnes - Guide
- Comment faire des colonnes sur word - Guide
- Trier un tableau excel - Guide
16 réponses
Salut,
Normalement en fixant la taille des éléments via le CCS ça devrait le faire..non?
Normalement en fixant la taille des éléments via le CCS ça devrait le faire..non?
td{
width:200px;
}
C'est étonnant..quand je fais :
...les colonnes du tableau font la même largeur.
<!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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 ?
<!-- 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 ?
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?
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?
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.
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.
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!
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>
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...
Je ne comprend pas, c'est pourtant étrange que les cellules se redimensionnent à une taille non définie comme telle...
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?
