Pourquoi les colonnes ne sont pas alignés dans mon en-tête fixe, le défilement de la table?

J'ai une table avec un en-tête fixe et le défilement du corps. Aucun des colonnes sont alignés correctement.

Voici ce que je vois dans Google Chrome:
Pourquoi les colonnes ne sont pas alignés dans mon en-tête fixe, le défilement de la table?

Que la capture d'écran est de cette minime HTML document que j'ai préparé:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
background-color: #888888;
}
.white_box
{
border: 1px solid black;
background-color: white;
}
.round_corners
{
padding: 20px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.shadow 
{
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
}
.aligncenter
{
margin-left: auto;
margin-right: auto;
}
#editpage
{
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
#updatesdisplay
{
width: 100%;
border-collapse: collapse;
}
#updatesdisplay tbody
{
display: block;
max-height: 500px;
width: 100%;
overflow-y: auto;
}
#updatesdisplay tr, #updatesdisplay thead
{
display: block;
width: 100%;
}
#updatesdisplay th
{
font-weight: bold;
font-size: 10pt;
border: 1px solid #AAAAAA;
padding: 3px;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(196,196,196,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(196,196,196,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(196,196,196,1) 100%); /* W3C */
}
#updatesdisplay tbody tr:nth-child(even)
{
background-color: #CCCCCC;
}
#updatesdisplay tbody tr:hover
{
background-color: #DDDDDD;
}
#updatesdisplay tbody tr.selected
{
background-color: lightblue;
}
#updatesdisplay td
{
cursor: pointer;
padding: 5px;
border: 0;
}
.update-description
{
max-width: 150px;
}
</style>
</head>
<body>
<div id="editpage" class="white_box shadow aligncenter round_corners">
<table id="updatesdisplay" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th><input type="checkbox" id="select-all"></th> <!-- Checkbox -->
<th>Application Name</th>
<th>Version</th>
<th>Description</th>
<th>Date Created</th>
<th>Download URL</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" name="sel1"></td><td class="update-appname">test</td><td class="update-version">0.5.0</td><td class="update-description">This is a simple test update designed to test the update system.</td><td class="update-created">2011-08-28 18:17:50</td><td class="update-download"><a href="http://localhost:8080/py/download?file=BeautifulSoup-3.1.0.1.tar.gz">http://sunjay.ca/test/download?file=BeautifulSoup-3.1.0.1.tar.gz</a></td></tr>
<tr><td><input type="checkbox" name="sel2"></td><td class="update-appname">test</td><td class="update-version">0.5.1</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 20:15:04</td><td class="update-download"><a href="http://sunjay.ca/download/test-0.5.1">http://sunjay.ca/download/test-0.5.1</a></td></tr>
<tr><td><input type="checkbox" name="sel3"></td><td class="update-appname">test</td><td class="update-version">1.5.3</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.3">http://www.sunjay.ca/up/test-1.5.3</a></td></tr>
<tr><td><input type="checkbox" name="sel4"></td><td class="update-appname">test</td><td class="update-version">1.5.4</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.4">http://www.sunjay.ca/up/test-1.5.4</a></td></tr>
<tr><td><input type="checkbox" name="sel5"></td><td class="update-appname">test</td><td class="update-version">1.5.5</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.5">http://www.sunjay.ca/up/test-1.5.5</a></td></tr>
<tr><td><input type="checkbox" name="sel6"></td><td class="update-appname">test</td><td class="update-version">1.5.6</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.6">http://www.sunjay.ca/up/test-1.5.6</a></td></tr>
<tr><td><input type="checkbox" name="sel7"></td><td class="update-appname">test</td><td class="update-version">1.5.7</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.7">http://www.sunjay.ca/up/test-1.5.7</a></td></tr>
<tr><td><input type="checkbox" name="sel8"></td><td class="update-appname">test</td><td class="update-version">1.5.8</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.8">http://www.sunjay.ca/up/test-1.5.8</a></td></tr>
<tr><td><input type="checkbox" name="sel9"></td><td class="update-appname">test</td><td class="update-version">1.5.9</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.5.9">http://www.sunjay.ca/up/test-1.5.9</a></td></tr>
<tr><td><input type="checkbox" name="sel10"></td><td class="update-appname">test</td><td class="update-version">1.6.0</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.0">http://www.sunjay.ca/up/test-1.6.0</a></td></tr>
<tr><td><input type="checkbox" name="sel11"></td><td class="update-appname">test</td><td class="update-version">1.6.1</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.1">http://www.sunjay.ca/up/test-1.6.1</a></td></tr>
<tr><td><input type="checkbox" name="sel12"></td><td class="update-appname">test</td><td class="update-version">1.6.2</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.2">http://www.sunjay.ca/up/test-1.6.2</a></td></tr>
<tr><td><input type="checkbox" name="sel13"></td><td class="update-appname">test</td><td class="update-version">1.6.3</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.3">http://www.sunjay.ca/up/test-1.6.3</a></td></tr>
<tr><td><input type="checkbox" name="sel14"></td><td class="update-appname">test</td><td class="update-version">1.6.4</td><td class="update-description">- Bug fixes<br>- General Speedups</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.4">http://www.sunjay.ca/up/test-1.6.4</a></td></tr>
<tr><td><input type="checkbox" name="sel15"></td><td class="update-appname">test</td><td class="update-version">1.6.5</td><td class="update-description">- Bug fixes</td><td class="update-created">2011-08-28 21:38:23</td><td class="update-download"><a href="http://www.sunjay.ca/up/test-1.6.5">http://www.sunjay.ca/up/test-1.6.5</a></td></tr>
</tbody>
</table>
</div>
</body>
</html>

Merci de m'aider à comprendre ce qui est mal. Merci!

OriginalL'auteur Sunjay Varma | 2011-08-29

5

Le problème est l'utilisation de display:block pour tr,thead & tbody.

Visite http://www.cssplay.co.uk/menu/tablescroll.html pour les approches

J'ai visité cette page avant, ce que me conseillez-vous de fixer dans mon CSS? Que dois-je le changer au lieu de la bloquer?
Je ne dirais pas à fixer votre CSS, je vous suggère d'utiliser une solution testée, par exemple liés. Des listes déroulantes ne sont pas faciles, Stu Nicholls ne pas passer son temps sur elle, si c'était facile.
correct. Supprimer ce style et il devrait fonctionner (comme il sera par défaut: display: table-row;"
Envisager d'ajouter une brève solution dans la réponse?

OriginalL'auteur Dr.Molle
1

Chaque fois que vous avez fait une table se comporter comme un div (je l'espère parce que vous avez été forcé), vous pouvez également assigner des catégories aux cellules et de définir les largeurs avec CSS pour assurer les colonnes de la ligne:
```
<style type="text/css">
td.col1 { width: 5em;}
td.col2 { width: 7em;}
</style>
<table>
<tr>
<td class="col1">your content</td>
<td class="col2">your content</td>
</tr>
</table>
```
OriginalL'auteur Deborah
0

Le problème est résolu par la simple effacement du deux lignes "display: block;"

Si l'on veut faire une ligne invisible, il peut encore être atteint par la création de affichage à "none", et il peut être à nouveau visible par la mise en affichage "" (chaîne vide).

OriginalL'auteur Martin Argerami

Vous devez vous connecter pour publier un commentaire.