Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS column widths with scrolling table

Status
Not open for further replies.
mcpeekj

mcpeekj

Vendor
Sep 21, 2001
105
0
0
I'm having trouble with column widths on a scrolling table not honoring their CSS widths.

Here is the HTML:
Code: 
<div class="tableContainer">
	<div class="innerframe" style="max-height: 390px;">
		<table cellspacing="0" cellpadding=0 class="datatable">
			<thead>
				<tr> 
					<td class="typecolumn">Type</td>
					<td class="widecolumn">Alias</td>
					<td class="widecolumn">Maps To</td>
					<td class="widecolumn">Aggregator</td>
					<td class="datecolumn">Modified</td>
					<td style="width: 20px;">&nbsp;</td>
					<td style="width: 22px;">&nbsp;</td>
				</tr>
			</thead>
			<tbody>...

And here is the corresponding CSS:
Code: 
.widecolumn {width: 211px;max-width: 211px;min-width: 211px;}
.datecolumn {width:130px;max-width:130px;min-width:130px;}
.typecolumn {width:85px;max-width:85px;min-width:85px;}
.tableContainer {
	position: relative;	/* to capture the absolutely positioned table header */
	padding-top: 19px;	/* space for the column heads */
	width: 890px;		
	margin: 0 auto;
	background-color: #f5f8fb;
	border: solid 1px #b9d3ea;
	}

/* this enables the table to scroll without scrolling the page */
.innerframe {
	overflow: auto;	
	width: auto;	
	max-height: 415px;		/* height is required */
	background-color: white;
	}

/* position the row of column heads above the table */
.tableContainer thead tr {
	position: absolute;	/* throws the header out of the table */
	top: 0px;
	left: 0px;
}
	
.datatable {
	border-right: solid 0px #b9d3ea;
	width: auto;
/*width: 99%;*/
}
	
.datatable thead td	{
	width: 116px; /*Firefox needs this*/
	border-bottom:1px solid #b9d3ea !important;
	color:#000000;
	font-weight:bold;
	height:15px;
	padding: 2px 3px 3px 4px;
	background-color: #f5f8fb;
	font-size: 8pt;
}
	
.datatable td	{
    margin: 0;
    padding: 2px 3px 3px 4px;
    height: 20px;
    font-size: .9em;
    border-bottom:1px solid #b9d3ea !important;
	/*width: 125px;*/ /*Firefox needs this*/
}

(I know the CSS is kind of a mess with mixed measurements, I'm just trying to get this to work).

So as you can see, I'm fixing the width of the table to 890px, and have column widths adding up to 890px. But none of the columns are actually getting those widths. My "widecolumn"s are varying from 185-213px (regardless of content of the cells) and my "datecolumn" is 120px (making it wrap for long dates). The total width of the table is coming out to 892px.

So, I'm glad it's equaling out to very close to the correct width, but I need the columns to honor the CSS widths. Any thoughts on what's going on?

And I'm refering to IE here (this is a legacy application and doesn't support Firefox at all).
 
Sort by date Sort by votes
Yes, sir.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
I'm already using jquery for some modals on the pages, so I might end up looking into using a jquery plugin for the scrolling tables with locked header rows, but I'd rather just get this working...
 
Upvote 0 Downvote
Taking your code and DOCTYPE, I can knock out the following 3 lines of CSS to get exact column widths in IE6:

Code: 
.datatable thead td {
	[s][!]width: 116px; /*Firefox needs this*/[/!][/s]
	border-bottom:1px solid #b9d3ea !important;
	color:#000000;
	font-weight:bold;
	height:15px;
	[s][!]padding: 2px 3px 3px 4px;[/!][/s]
	background-color: #f5f8fb;
	font-size: 8pt;
}

.datatable td {
	margin: 0;
	[s][!]padding: 2px 3px 3px 4px;[/!][/s]
	height: 20px;
	font-size: .9em;
	border-bottom:1px solid #b9d3ea !important;
	/*width: 125px;*/ /*Firefox needs this*/
}

Padding adds onto the width of an element, so IE is trying to fit 939px of cell width into 890px. It obviously cannot do this and honour the 890px, so it shrinks various widths about equally until a fit is made.

The width style I think is obvious as to why it's wrong :)

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
P.S. When I said 'exact column widths', I meant the widths that your CSS implied:

85, 211, 211, 211, 130, 20, 22

The figure of 939 came from 890 + 49, where 49 is the 4px + 3px L/R padding for each of the 7 cells.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
this is a legacy application and doesn't support Firefox at all
Click to expand...

Out of interest, why do you have a whole bunch of 'Firefox needs this' comments scattered around if this is an IE-only app?





Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
I should have known it was something like that. When I remove the left & right padding, all is well. Thank you very much for the help.

As for the Firefox comments, those are due to my using sample code to get the scrolling table to work. I just left the FF stuff in there so *ideally* the tables work great in FF when we get rid of the VBScript and start supporting it.

Thanks again,
Joe
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
321
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
158
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
121
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
146
PeDa
PeDa
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
202
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top