CODEWITHSUNDEEP
javascripthtmlcss
hnroot
hnroot

Reputation: 1114

Huge HTML Table with fixed header, alignment between header cells and row cells

I need to represent huge data(37 columns,1000+ rows) in web. I would like to fix header row of this table and then manipulate data accordingly.

There are lots of possible solutions in web, some of them depends on css and some depends on javascript.

I have tried lots of them, and each time I ve stucked at the same point where table header cells and table row cells are not aligned.

First way i have tried : https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html Second way i have tired : http://www.imaputz.com/cssStuff/bigFourVersion.html#

They both, fixed the header of course. But i still have the alignment problem.

Do you have any suggestions? I m begginer to html and css, any help would be appreciated.

Thank you in advance!

Upvotes: 1

Views: 754

Answers (2)

mkoryak
mkoryak

Reputation: 57928

i have some experience in this and i can give you some thoughts/ pointers:

  • easiest way to do this is to set table style to fixed, then you can change column widths with css and they will stay that wide regardless of content inside.
  • after your column widths is pre-defined, you can clone the thead into another table above your table and it will act like a fixed header

otherwise you will need to:

  • set the height of the header to 0px
  • clone the header into a table above the table
  • set the width of the new header's table to the width of original table
  • set the outerwidth of each cell in the new table to the outer width of the same header cell in the original table

also, none of the solutions for doing this seem to be good. i found that writing a custom solution is always better then trying to arm wrestle an existing generic plugin into doing what i need.

Upvotes: 2

supertopi
supertopi

Reputation: 3488

I worked on a project where the goal was to visualize large data sets (10-20 columns, 500+ rows), among other visualizations, as a table.

I used Google Visualization API Table. It's simple to use and controlled with JavaScript (don't scare off!).

It has nice support for formatting (through DataTable class). It actually uses HTML table markup with some extra JavaScript and CSS in there. The Table class takes care of the cell alignment. Take a look at the examples.

Upvotes: 0

Related Questions