meetselva / fixed-table-rows-cols

Fixed Table Header and Columns
http://meetselva.github.com/fixed-table-rows-cols/
Other
77 stars 42 forks source link

Lining up header and body columns - a fix #43

Open fredmc opened 7 years ago

fredmc commented 7 years ago

If you give a width to a table cell/column, and the content is wider than that and cannot be wrapped (for example, a url with no spaces), most browsers will make the column wider. This causes the columns in the body and header to no longer be aligned.

I fixed this by putting style="max-width:150px; min-width:150px;" in each and tag. Of course, I use the correct width for each.

For what it's worth.

Great plugin. After the above fix, way better than anything else I could find.

tonyfarr commented 7 years ago

Hi fredmc, I've been looking at this issue in my table for a couple of days now. Couldn't figure it out! Thanks for posting this. My table is now working as it should!!

jxramos commented 7 years ago

I noticed some odd header column vs body column width dependencies playing with the colModal array values. Seemed like I had to tune in magic numbers to get the two regions to display properly. fredmc, when you say "Of course, I use the correct width for each." Is that a comment on your max-width and min-width settings or are you referring to the colModal widths?

From what I can tell the developer needs to tune their colModal widths to reasonable widths for each column. This is tricky for my application since I'm displaying arbitrary tables, where I don't know in advance what the column widths are going to be. The row heights seem to present no issues, just this column width stuff. I'm trying to do some formulaic generating of colModal widths on the server side from a jinja template that's working from an array of ints that derive from the number characters for the widest string in the columns of my table. Haven't quite nailed it yet however. columnmisalignment