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

S

4

6

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:

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!

Sodomite answered 29/8, 2011 at 0:16 Comment(0)

E

5

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

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

Euchology answered 29/8, 2011 at 1:5 Comment(4)

I have visited that page before, what do you suggest I fix in my CSS? What should I change it to instead of block? – Sodomite 29/8, 2011 at 1:15

I wouldn't suggest to fix your CSS, I would suggest to use an tested solution, e.g. the linked one. Scrollable tables are not that easy, Stu Nicholls wouldn't spend his time on it if it were easy. – Euchology 29/8, 2011 at 1:35

@Euchology correct. Remove that style and it should work (as it will default to: display: table-row;" – Thereat 19/12, 2012 at 13:23

Consider adding a brief solution in the answer? – Wieche 30/5, 2017 at 10:26

S

1

Whenever you've made a table behave like a div (hopefully because you were forced), you can also assign classes to the cells and set the widths with CSS to ensure the columns line up:

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

Sse answered 3/4, 2013 at 21:7 Comment(0)

C

1

The problem is solved by simply erasing the two lines "display: block;"

If one wants to make a row invisible, it can still be achieved by setting display to "none", and it can be made visible again by setting display to "" (empty string).

Camera answered 1/3, 2019 at 19:17 Comment(0)

A

0

The @Dr.Molle answer is correct

I just had to set the table row to display: table-row;

I made a responsive table, which in mobile the header is set display: none.

Archaeology answered 28/5, 2022 at 14:38 Comment(0)

Recommended topics

Hot tags