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

html css width css-tables

16,615

Solution 1

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

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

Solution 2

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>

Solution 3

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

16,615

Author by

Sunjay Varma

I'm a professional who takes his code seriously. I'm also a lot of fun. Hard to tell over the internet isn't it?

Updated on June 12, 2022

Comments

Sunjay Varma almost 2 years

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!

Sunjay Varma over 12 years

I have visited that page before, what do you suggest I fix in my CSS? What should I change it to instead of block?
Dr.Molle over 12 years

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.
Ujjwal Singh over 11 years

@Dr.Molle correct. Remove that style and it should work (as it will default to: display: table-row;"
nosh almost 7 years

Consider adding a brief solution in the answer?