/    Sign up×
Community /Pin to ProfileBookmark

CSS & table column width

Copy linkTweet thisAlerts:
Sep 22.2004

I have a table that has a header, many rows, and a footer. Is it possible to make the header and footer remain in position and allow the main body of the table to be in a scrollable div (overflow:auto??
One way I was thinking I could do it is to use seperate tables for the header and footer but then I’d need to set table widths on all 3 tables so they align properly – can this be done thru CSS?

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@rsdauthorSep 22.2004 — Here's a sample table...

<html>

<head>

<title>Sample</title>

<style type="text/css">

div {

height:200px;

width:400px;

overflow:auto;}

table {

width:99%;

border:1px solid black;}

thead {color:#F00;}

table>tbody {

overflow:auto;

height:120px;}

td {

font-size:14px;

font-weight:bold;

text-align:center;

border:1px solid black;}

tfoot {color:#F00;}

</style>

</head>

<body>

<p>This works in Netscape but not in IE. <br>

I want the table footer to remain static like the table header does. <br>

I could use 3 seperate tables but then I would need to find a way <br>

to have the column widths match.</p>

<div id="tbl">

<table>

<thead>

<tr>

<td>Column 1</td>

<td>Column 2</td>

<td>Column 3</td>

<td>Column 4</td>

</tr>

</thead>

<tfoot>
<tr>
<td>Total 1</td>
<td>Total 2</td>
<td>Total 3</td>
<td>Total 4</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@BonRougeSep 27.2004 — It seems to me that making 3 tables is the only way to do it - I know you'd thought of that, but...

Please have a look at this and see what you think :

[URL=http://cheers-sendai.com/table.htm]table[/URL]

Please let me know what you think too - I'll be happy if this helps.

Cheers.
Copy linkTweet thisAlerts:
@rsdauthorSep 27.2004 — I can get the thead to stat put but it's the table footer that doesn't work in IE. I had to manually set the column widths and use a second table for the footer.

Oh well, another good thing to do with the next release.
Copy linkTweet thisAlerts:
@BonRougeSep 27.2004 — I'm confused - you say the table foot won't stay where it is in IE.

It seems fine to me when I look at it in IE.

What's wrong?
Copy linkTweet thisAlerts:
@rsdauthorSep 27.2004 — I'm trying to get the header and footer to stay in position while the table data is scrolled - so you see the header and footer at all times.
Copy linkTweet thisAlerts:
@CstickSep 27.2004 — It seems like you want to be able to scroll within the body and have the footer & header stay stationary. I wouldn't suggest going that route, but if you do, I beleive that frames or textbox are your only choices for getting that result.
Copy linkTweet thisAlerts:
@ray326Sep 27.2004 — [i]Originally posted by rsd [/i]

[B]I'm trying to get the header and footer to stay in position while the table data is scrolled - so you see the header and footer at all times. [/B][/QUOTE] That's what BonRouge's example does for me. Does it not work for you?
Copy linkTweet thisAlerts:
@rsdauthorSep 27.2004 — His example contains 3 tables.

I need it to work cleanly with 1 table.
Copy linkTweet thisAlerts:
@BonRougeSep 28.2004 — Please have a look at this :

[URL=http://www.cheers-sendai.com/table.htm]Table with static header, footer and column-widths.[/URL]

I thought there must be a way to set a maximum column width so that they don't change. I think this is it.

This works in Firefox and in IE.

The table footer and table header remain static.

I've used 3 separate tables.

The column widths won't change because the cells are filled with divs which are all the same width. The overflow is hidden, so the size of the divs shouldn't change.

The width of the divs is set as a class (.cell). The width of the tables is set as another class (.tables).

Basically, I think if you have any data that is bigger than the width of these divs, you need to change the width in the .cell class. Then you need to change the width in the .table class to move the scrollbar to the right.
Copy linkTweet thisAlerts:
@TimeBanditSep 29.2004 — use a javascript to get IE to behave:

http://www.thecodeproject.com/jscript/scrollable_table.asp?print=true

force height on TBODY for Mozilla and set overflow:scroll

I just did this for a client a week ago... ?
×

Success!

Help @rsd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...