File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Getting Two Tables to Line Up

 
Steve Dyke
Ranch Hand
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
width="80"

80 what?
 
Paul Clapham
Sheriff
Pie
Posts: 20208
26
MySQL Database
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Sheriff
Pie
Posts: 20208
26
MySQL Database
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Sheriff
Pie
Posts: 20208
26
MySQL Database
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Sheriff
Pie
Posts: 20208
26
MySQL Database
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Sheriff
Pie
Posts: 20208
26
MySQL Database
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 1602
1
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic