File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Getting Two Tables to Line Up Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Getting Two Tables to Line Up" Watch "Getting Two Tables to Line Up" New topic
Author

Getting Two Tables to Line Up

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1413
I have a page with two DIV tags. In the first DIV tag I populate it with a table to act as headers. In the second I populate it using jstl to create a data table. The problem is the columns in the two tables are not lining up. I am using CSS to make the tables fixed width and I am defining each column with a specific width.

Here is my two jsp files:

css


header


body

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
width="80"

80 what?
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18541
    
    8

The best procedure when your HTML isn't working the way you want it to, is to look at the HTML. Looking at some code which generates the HTML isn't useful. Look at the actual HTML and ask questions about that.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1413
Paul Clapham wrote:The best procedure when your HTML isn't working the way you want it to, is to look at the HTML. Looking at some code which generates the HTML isn't useful. Look at the actual HTML and ask questions about that.


IE8

This is a fixed width table 805px. The two highlighted lines(17 and 19) of code do not appear as the width specified when viewed in the browser.

Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18541
    
    8

Looks fine in my browsers (including IE8). Two caveats: I didn't get out my pixel ruler to make sure the widths were exactly accurate, and I don't have your CSS which declares those classes.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1413
Paul Clapham wrote:Looks fine in my browsers (including IE8). Two caveats: I didn't get out my pixel ruler to make sure the widths were exactly accurate, and I don't have your CSS which declares those classes.


Okay but if the width of the two lines(17 and 19) are changed to 10 and 140, the displayed page in browser remains the same. In other words changing the width values does not seem to make any differance.

CSS:

Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18541
    
    8

Well, yeah. It isn't possible to fit the word "Index" into 10 pixels, so the browser does the best it can. Everything still looks nicely lined up though.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1413
Paul Clapham wrote:Well, yeah. It isn't possible to fit the word "Index" into 10 pixels, so the browser does the best it can. Everything still looks nicely lined up though.


I realise this example I gave is an extrem. But the real problem this is causing is this. The table I have posted here contains table header data. Immediatly below this is the body table and the columns on the header do not line up with the body columns, at least in part. You noticed the header table has two rows. The first cell spans 3 columns and is 260 px wide. This top header row matches exactly with the body columns. Now the second row of the header, first three columns do not match up with first three row of body columns but column 4 and after do. Now I figure my real problem is the colspan of three columns of the first header row versus the three columns of the second header row. Anyway I figured I could fudge the first and third columns of header row two to make up this difference but they will but budge, even when tring to set them a few pixels different.

Sorry for the drawn out book. I have messed with this all day and really thank you for your help.
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18541
    
    8

I figure your problem is the decision to have two tables which have to be precisely matched up. Why not just one table?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1413
Paul Clapham wrote:I figure your problem is the decision to have two tables which have to be precisely matched up. Why not just one table?


I am probably misinformed about this as I seem to be about most things but I had the understanding that two tables were required when yo had many rows of data and you needed to scroll that data while keeping the header row viewable.
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18541
    
    8

I didn't even know you could do that. I've never seen it done on any site I have visited but perhaps that's because I haven't ever gone to a site which shows me a long table and cares about me scrolling it. So I'm not your best advisor in this case.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1413
Paul Clapham wrote:I didn't even know you could do that. I've never seen it done on any site I have visited but perhaps that's because I haven't ever gone to a site which shows me a long table and cares about me scrolling it. So I'm not your best advisor in this case.


Thats okay you have helped me a bunch. All of my web apps are database oriented and are designed so the user can run sql queries based on authority and user defined filters. I have employed the use of paging where the rows are huge thanks to some suggestions in this forum.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Getting Two Tables to Line Up