J'écris un simple rapport Web avec une mise en page simple pour un usage interne.Problème CSS avec en-tête et espace droit manquant entre la table et la bordure de la page
La mise en page consiste en un en-tête en haut et un contenu en bas, généralement un tableau et un peu plus (très simple). Mon problème est que lorsque la table est plus grande que la fenêtre du navigateur, la mise en page gâche: l'en-tête est large comme la fenêtre et non comme la page body alors quand je défile à droite, il sort de l'écran, de la table est coincé contre le côté droit de la fenêtre, même si j'ai une marge pour le corps.
Le code HTML d'une page de test propre est (nombre de tr éléments réduits pour la légèreté):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Test page</title>
</head>
<body>
<h1>
Test page
</h1>
<div class="body" id="body">
<p>
This is a test page.</p>
<table class="shiny_table">
<thead>
<tr>
<th>
0
</th>
<th>
1
</th>
<th>
2
</th>
<th>
3
</th>
<th>
4
</th>
<th>
5
</th>
<th>
6
</th>
<th>
7
</th>
<th>
8
</th>
<th>
9
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
0.9721986181295992
</td>
<td>
0.6041465194175369
</td>
<td>
0.5777094598685739
</td>
<td>
0.9741661116808004
</td>
<td>
0.8224265079662112
</td>
<td>
0.7236314528096713
</td>
<td>
0.24133248609797375
</td>
<td>
0.8836446393181888
</td>
<td>
0.02439762941899959
</td>
<td>
0.8171104825665716
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Le contenu de style.css est:
* { font-family: Verdana, Arial, Sans Serif; font-size: 10pt; }
html, body { margin: 0pt; padding: 0pt; }
body { background-color: rgb(192, 255, 192); }
h1 { margin: 0pt; padding: 10pt; font-size: 20pt; background-color: rgb(192, 192, 255); text-align: center; text-transform: uppercase; }
.body { margin: 10pt; }
.shiny_table, .shiny_table th, .shiny_table td { border: solid 1pt rgb(192, 192, 192); border-collapse: collapse; }
.shiny_table th, .shiny_table td { padding: 5pt; }
Voici comment cela se voit dans Mozilla Firefox 3.6.6 (Internet Explorer 8.0.6001.18702 a le même problème):
Comment puis-je avoir le droit d'en-tête (ont l'étirement de la couleur d'arrière-plan à droite alors que le texte est centré dans la « première » fenêtre », rester fixe sans bouger, d'autres idées jolies), et la bordure droite de la table est-elle espacée de la bordure de la page?
Merci d'avance, Andrea.
Votre solution fonctionne parfaitement, en définissant '.body' à' display: inline-block; margin: 5em 1em 1em 1em; 'donne son espacement au contenu, et ajoute' display: inline-block; position: fixe; width: 100%; 'to' h1' rend l'en-tête fixe visible en haut (ce qui est acceptable). – Albireo
J'ai eu des problèmes avec cela pendant un moment maintenant. Cela fonctionne très bien !!! – Dragn1821