Sunjay Varma Sunjay Varma - 5 days ago 5
CSS Question

Why are the columns not aligned in my fixed header, scrolling table?

I have a table with a fixed header and scrolling body. None of the columns are lining up correctly.

Here is what I see in Google Chrome:
enter image description here

That screen shot is of this minimal HTML document I have prepared:

<!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>


Please help me figure out what is wrong. Thanks!

Answer

The problem is the use of display:block for tr,thead & tbody.

Visit http://www.cssplay.co.uk/menu/tablescroll.html for approaches

Comments