Différence d'affichage d'un tableau dans une div avec IE et Safari
Différence d'affichage d'un tableau dans une div avec IE et Safari - HTML/CSS - Programmation
Marsh Posté le 07-05-2012 à 16:26:06
Habituellement, le problème avec IE vient de margin et padding, et c'est la raison pour laquelle, on a souvent en haut du CSS :
body { |
Peut-être que cela vient d'ailleurs, par exemple overflow.
Marsh Posté le 07-05-2012 à 17:20:25
Merci olivthill,
En fait je n'ai pas de problème avec IE qui affiche bien 18 colonnes dans l'intégralité de l'écran sans avoir à utiliser le curseur.
Le problème vient de Safari qui affiche 18 colonnes, 14 colonnes dans l'intégralité de l'écran et pour voir la suite, il faut utiliser le curseur.
Merci encore pour ton aide.
Bien cordialement.
Message édité par piersoleil le 07-05-2012 à 17:20:55
Sujets relatifs:
- affichage de donné
- Macro tableau croisé dynamique
- différence de perfs énorme entre Linux/Windows avec CUDA
- [boucle PHP remplissage tableau
- Problème largeur colonne d'un tableau PHP/CSS
- [AIDE] EXT-JS 4 : filtres sur tableau
- fenêtre pop-up après un submit
- Affichage de fichiers supérieur à...en DOS
- Wordpress : Bug affichage anciennes pages
- Affichage optimisé d'un graphe de dépendances
Marsh Posté le 07-05-2012 à 15:03:00
Bonjour à tous,
Je ne réussis pas à trouver la solution à ce problème.
J'ai un tableau avec 18 colonnes qui est inséré dans une div.
Avec IE, tout fonctionne normalement. L'affichage sous IE réduit bien la largeur de la table sans dépasser les limites de la Div
Par contre, l'affichage sous Safari fait dépasser la table de la div.
A titre d'exemple, j'ai créé en CSS une div et une table (dans un fichier CSS qui sera inséré dans <head> )
div.toto {
positionrelative;
width:auto;
border: 10px solid red; /*Taille bordure augmentée pour vérifier le débordement ou non.*/
}
table.safari{
border-collapse:separate;
border-spacing:0;
max-width: 780px; /* dimention + petite que celle de la Div pour contrôler le résultat à l'écran*/
width:100%;
border-top:1px solid #cfcfcf;
margin-bottom:18px;}
th.chsaf {
color: #C52a29;
font-family:Arial, Tahoma, Verdana;
text-transform:uppercase;
font-size:9px;
text-align:right;
margin:0;
padding: auto;
min-width: auto;
max-width:auto;
border-width:1px;
border-style:solid;
border-color:#C6C6C6;
width:auto;
}
L'affichage est en php (en fait, le données affichées proviendront d'une base de données)
<?php
echo '<div class="toto"><[#ff0e00]table class="safari">
<th class="chsaf">Colonne 1</th>
<th class="chsaf">Colonne 2</th>
<th class="chsaf">Colonne 3</th>
<th class="chsaf">Colonne 4</th>
<th class="chsaf">Colonne 5</th>
<th class="chsaf">Colonne 6</th>
<th class="chsaf">Colonne 7</th>
<th class="chsaf">Colonne 8</th>
<th class="chsaf">Colonne 9</th>
<th class="chsaf">Colonne 10</th>
<th class="chsaf">Colonne 11</th>
<th class="chsaf">Colonne 12</th>
<th class="chsaf">Colonne 13</th>
<th class="chsaf">Colonne 14</th>
<th class="chsaf">Colonne 15</th>
<th class="chsaf">Colonne 16</th>
<th class="chsaf">Colonne 17</th>
<th class="chsaf">Colonne 18</th> </table></div>'
?>
La table avec IE ne déborde pas de la <div> et déborde de la <div> avec Safari.
Il semblerait qu'IE automatise la largeur des <th> et que Safari ne le fasse pas.
Je vous remercie à l'avance pour toute aide à trouver une solution.
Bien cordialement.
Modifié par piersoleil (07 May 2012 - 11:50)
Message édité par piersoleil le 07-05-2012 à 17:27:44
---------------
piersoleil