18041 sujets

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

Taille des cellules d'un tableau?

Salut à tous,

J'ai fait un calendrier en tableau pour un site web. J'ai fixé la taille de chaque cellule à 30px et la taille de mon tableau fait exactement 218px (donc 7 x 30px + 8px pour les "marges de séparation") Le problème, c'est que à l'affichage certaines cellules sont plus large que d'autres...

C'est possible de forcer la taille ou de régler ce problème?

Merci
Bonjour,

Si le contenu des celulle nécéssite plus de place que ce que tu lui donne, bah... il repoussera la bordure.

Il y a bien la propriété white-space qui permet de gérer la césure, mais je ne pense pas qu'elle puisse être utile ici (du moins pas d'après la doc que j'ai sous la main).

Tu as donc 2 solutions, agrandir les cellulles, diminuer les padding ou la taille des caractères ou faire des césures "manuelles".

(Bon après le problème vient peut être d'autre chose mais sans le code...)
Bonjour,

Ok, merci, je sais pas trop comment faire, j'ai pas l'impression que le contenu soit trop grand, ça rest des chiffres...

Mais je mets quand même le code au cas ou :

Le tableau qui est dans le bloc #calendrier (pas mis ici)


<table border="1">
<tr>
<th>Lu</th>
<th>Ma</th>
<th>Me</th>
<th>Je</th>
<th>Ve</th>
<th>Sa</th>
<th>Di</th>

</tr>
<tr>
<td class="vide"></td>
<td class="vide"></td>
<td class="vide"></td>
<td class="vide"></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>

<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>

<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>

<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td class="aujourdhui">29</td>

<td>30</td>
<td>31</td>
</tr>
</table>


Le CSS :


#droite #calendrier th {
padding: 0 0 3px 0;
text-align: center;
}

#droite #calendrier td, 
#droite #calendrier td.aujourdhui, 
#droite #calendrier td.vide {
width: 37px;
height: 30px;
line-height: 30px;
padding: 0 0 0 5px;
background: #bdbcbc;
}

#droite #calendrier td.aujourdhui {
color: #fbfbfb;
background: #0f57b6;
}

#droite #calendrier td:hover {
color: #fbfbfb;
cursor: pointer;
background: #f5a61f;
}

#droite #calendrier td.vide {
background: transparent;
}


Et le sites est là!

Merci d'avance...
Modifié par le rouge (29 May 2009 - 08:22)
Sous IE6 toutes les cellules ont la même taille.

Avec quel navigateur as-tu constaté le problème ?

ps. : attention aux font exprimée en px, ça empèche le redimentionnement avec IE6/7
Laurie-Anne a écrit :
Sous IE6 toutes les cellules ont la même taille.

Avec quel navigateur as-tu constaté le problème ?

ps. : attention aux font exprimée en px, ça empèche le redimentionnement avec IE6/7


Sous IE 7, mais bon ça se joue à 1-2 pixels prêt, mais ça me dérange.

Pour les font, il est bien obligatoire de fixer la première font en pixel, non?

Merci
le rouge a écrit :
Pour les font, il est bien obligatoire de fixer la première font en pixel, non?


Non surtout pas, car sinon cela a un impact sur tous ses héritiés et donc pas de redimenssionnement possible
Par exemple

body { font:100% Arial, Helvetica, sans serif; }
#global { font-size: .85em; }


Tous les objets inclus dans #global partiront de l'héritage de cette définition pour construire leurs tailles de textes.

h1 { font-size: 2.2em; }
p { font-size: 1em; }
le rouge a écrit :
Mais le em doit se rapporter à un chiffre de base non?


Non...

Un peu de lecture.

Edit : Le 100% sur body sert a éviter un problème de compatibilité avec IE, il me semble, mais n'est pas obligatoire.
Modifié par Laurie-Anne (29 May 2009 - 09:36)
Ok ok, j'ai tout enregistré.

Merci bien.

Mais vous n'avez pas une idée pour résoudre mon "petit" problème de base?
Sujet clos
Aller à