CSS/HTML fixed table header / scrollable table promblem

1

Hey, I used this this website as a basis for my table:

http://www.imaputz.com/cssStuff/bigFourVersion.html

and here is the one I am working on:

http://kiskiclass68.googlepages.com/classtableV2.html

but for some reason, my table headers/cells don’t align…can anyone help me figure out what is going on here?

2

when you define a width for an element that has padding (in this case you’ve defined all your <th> elements to have padding: 4px 3px 4px 3px; ) you need to subtract the padding values from your width values.

For example, your first <th> has a width of 62px, but with left and right padding of 3px each, the new width SHOULD be 56px;

HOWEVER

Ultimately, you shouldn’t define any width for your <th> or <td> elements, and instead allow whatever content is within each to define the width of your columns.

If your <th> is shorter than your <td> content, the column would remain the width of the <td>

and vice versa

I think you are overcomplicating a table that should be more flexible than it is, because you’ve been defining set widths for everything… which is no good.

3

Also, once you fix your <th> widths, remove ALL widths from your <td>s

their widths will auto size to fit their respective <th>'s

you are also using selectors badly, well, not really, but you could tidy up your code if you simply gave each table heading its own class, and apply the width to the respective class.


<table>
<tr>
<th class="l_name">Last name</th>
<th class="f_name">Full name</th>
etc... etc..




table tr th.l_name { width: 56px; }
table tr th.f_name { width: 189px; }
4

Thanks for the tips, I’ll play around with it and see how it comes out.

http://kiskiclass68.googlepages.com/classtableV2.html

Its getting better, but still not aligned.

5

Ok, looking better,

However, you forgot to add 16px to your two widths, I changed them (in red) here:


/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
    overflow: hidden;
    width: **[COLOR=Red]1216[/COLOR]**px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
    float: left;
    width: 1200px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
    width: **[COLOR=Red]1216[/COLOR]**px
}

Also, when you scroll down, you’ll notice one of the email addresses is really long, which throws off the width of everything else, you’re going to have to do some wizardry on the email column <td>s to get them to cut off email addresses, only showing a portion, or make your table wider (although it IS already 1216px)

*NOTE: experiment with giving each <td> its own class and width like you did the headers… but this is probably a pain in the toosh unless this output is done with something server-side.

However you could uncomment that chunk of td + td + td + td you have and find the one for the email column and fiddle with its overflow to see if you can cut off your email addresses, and keep all the widths (but change their values like you did for the <th>s)