5 replies [Last post]
jkruer01
Offline
newbie
Last seen: 18 years 7 weeks ago
Joined: 2004-05-19
Posts: 3
Points: 0

Hello,

I would not consider myself a CSS newbie, but I am completely stumped on this one!

I have a webpage that displays the results of a query on a database. By default the page displays a fixed set of columns, but the user is allowed to type in a SQL statement and have that data displayed. In other words, I have no idea how many fields will be returned or what the length of those fields will be.

Currently I am displaying this information in a table and it is working great. However, as the database gets bigger the page is taking longer and longer to load because all the information must first be loaded before the table can be displayed.

How can I display this information without using tables(i.e. with CSS)? All of the columns must line up vertically and all of the rows must line up horizontally.

I would love it if someone could help in solving this problem!

Thanks!

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 18 years 7 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Legitimate use for tables... but I want to use CSS. How?

I think you will find that you cannot do it with any less code using css because:

each row will need to be in line, so you will most likely have to put in a block element probably a div for each row. Equivalent to a <tr> tag

each cell of the "table" must be aspecific width, so that all the columns line up. Each cell must be wrapped in a span or something. equivalent to a <td> tag.

You then have to add classes to your "cells" so that each of them has a specific width that matches the rest in it's column.

Looking at the above you can see that you actually end up with more code for the table.

The best bet is to remove any html attributes from the td's and tr's - set the widths in the heading cells (or not at all).

BTW You do realise that by letting a user enter a query directly into the database you have a security nightmare on your hands???

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

firstreflex
firstreflex's picture
Offline
Enthusiast
Brooklyn USA
Last seen: 15 years 18 weeks ago
Brooklyn USA
Timezone: GMT-5
Joined: 2003-10-21
Posts: 104
Points: 0

Legitimate use for tables... but I want to use CSS. How?

Are you using this?:

table{
table-layout:fixed;
}

It should speed up your tables.

jkruer01
Offline
newbie
Last seen: 18 years 7 weeks ago
Joined: 2004-05-19
Posts: 3
Points: 0

Legitimate use for tables... but I want to use CSS. How?

Thanks for the fast replies!

I will respond to the replies in the order they were posted.

Quote:
I think you will find that you cannot do it with any less code using css

I am not trying to use less code, I am just trying to use something other than a table to display the data. The reason is that in IE data in a table will not be displayed until all of it has been received. In other words it doesn't display one line at a time. This causes the page to be blank for a period of time, depending on how much data is returned.

Quote:
set the widths in the heading cells (or not at all).

I am currently not setting the widths, but it still does not speed up the display.

Quote:
BTW You do realise that by letting a user enter a query directly into the database you have a security nightmare on your hands???

It is on an intranet so I am not worried about it. Also, I have checks put in place so that people can only put in a select statement.

Quote:
Are you using this?:
Code:
table{
table-layout:fixed;
}

I was not using that. I have not heard of it until now. I tried that and it did speed up the display. The rows were displayed one at a time instead of waiting for all of them to be rendered. Unfortunately, I cannot use this because of the type of data I am displaying. Some columns have large lengths and other columns only have 3 characters. When I use this the columns with a large length are scrunched up very small and they are very hard to read.

Thanks for the suggestions, but so far none of these will work. Crying

jkruer01
Offline
newbie
Last seen: 18 years 7 weeks ago
Joined: 2004-05-19
Posts: 3
Points: 0

Legitimate use for tables... but I want to use CSS. How?

Here are the thoughts that I had:

I am using ASP and am getting the results to a 2D Array using the getRows method of the result set.

The traditional, and my first, way of thinking is to loop through the rows and then have another loop to go through the columns. This you would end up with something like this for each row:

<div>
  <span></span>
  <span></span>
  ...
</div>

Unfortunately this will not work. Either the columns will be fixed width (which won't work because you don't know how long the value in the field is), or the "columns" will not be lined up.

So, after "thinking outside of the box", or in this case "thinking outside of the table" I thought of this idea. I wanted to run it by other people before I started coding.

Instead of writing out data one row at a time, I could write out the data one column at a time. Thus, for each column I would have something like this:

<div>
  <div></div>
  <div></div>
  <div></div>
  ...
</div>

The outer div would represent a column and the inner divs would represent the individual cells in a column. Each outer div would be floated to the left so that they would all display side-by-side.

Before I go at it coding, does anyone have any comments/suggestions about this? Do you think it will or will not work?

Thanks!

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 18 years 7 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Legitimate use for tables... but I want to use CSS. How?

you would still have to set heights for the cells to get rows to line up. This will cause a problem in IE if the content exceeds the cell height as IE will cause the divs to expand vertically and this will cause the rows to miss-align.

This would also result in the each column getting displayed in turn, rather than entire records, which will not be any more useful IMHO than having to wait for the entire thing

I have an idea though. Dunno if you will like it but it may help:

loop through the records as you are. At the end of every 10th record, insert:

    </table><table>

So you get ten records at a time. This of course will lose you some columnar alignment. For this I would do a quick server-side function to analyse the content of the fields and decide what percentage for each column in the the table to display.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P