By generalizing the code in this SO answer, I've created a small jQuery plug-in which makes it easy to set up a scrolling header on any table - that is, when you scroll down such that the table header would normally be outside of the viewable window, a clone of the header becomes fixed to the top of the window so that you can see which columns are which. That's all working fine, but the problem I'm having is that I can't get the column widths to match up perfectly between the clone table and the original table.
I've created a jsFiddle which demonstrates the problem here. The gist of it is that I'm using the following loop to copy cell widths from the parent table to the clone table:
$("#tbl1").find('tr').first().children().each(function(i, e)
{
$($("#tbl1_clone").find('tr').children()[i]).width($(e).width());
});
This is necessary because the clone table only consists of the parent table's header; it has none of the content, therefore its column widths would be different than the parent table's without this step. However, this loop doesn't quite work properly. The cell widths in the cloned table are always off by a few pixels. This happens in both IE8 and Chrome (and presumably others, though I haven't tested them.)
I'm at a complete loss as to how to correct this problem. Please check out the jsFiddle, as it explains the problem much better than I have.
It's perhaps worth noting that the same code seems to work when the clone table's position is not fixed. However, that's of no use to me, since I need it to be fixed.
For some reason, the width attribute on your cloned table is throwing off the calculations. I'm not exactly sure why but if you use:
$("#tbl1_clone").removeAttr('style');
at the end of your jquery code like, here, it seems to work.
I know this question is really old... but I stumbled upon it with a similar issue, figured I'd add an answer just for reference.
It took me about a week to realize that switching from getting the Element.offsetWidth() to getting the Element.getBoundingClientRect().width fixed my problem completely.
I'm not sure about jQuery... but I'm using plain JS to do the same thing here (clone my table header and copy the widths over) and I was having weird width issues that weren't making any sense... this fixed it completely.
Apparently Element.getBoundingClientRect().width will get the width to the neariest fraction, while Element.offsetWidth() will round it off to the nearest whole number.
You can view this answer for more information (they'll explain it better than I can right now): How do I retrieve an HTML element's actual width and height?
Try using offsetWidth, something like...
// make each cell width in the header table, the same width as
// the cells in the orginal table (header table has one row)
$headerTable.find('td, th').each(function(index)
{
var width = originalTable.rows[0].cells[index].offsetWidth
this.width = width;
});
Related
Use case
I want to detect if html tables get too wide, and if so, I want to flip the table header cells to become vertical (e.g. with writing-mode: vertical-lr;).
I want to update this on resize: If the viewport gets bigger, the text in the cells might become horizontal again.
The flip condition is whether the original table with horizontal labels would be wider than its container.
Question
How do I determine the width a table would have with horizontal labels, without changing the table itself?
Thoughts
My current idea would be to make an invisible copy of the table with horizontal labels, and use it as a "sensor". But I am afraid this will pollute the DOM and cause side effects somewhere. Also I would need to keep this copy updated all the time.
Is there a "best practice" or a known pattern to solve this problem?
It is actually quite simple:
We can change the css on the table during the script run. Once we query a property like element.width, this will cause a reflow during the script execution, but it won't cause a repaint. So this means we can do the test without the need for a cloned DOM element, and without visible changes.
See https://developers.google.com/speed/docs/insights/browser-reflow
I am using this tablescript to display a virtual table but for some reason after a specific point problems occur.
On Google Chrome after the top value (The position value where the row is displayed in the parent div) of 1.677715e+07px (16777150px) is exceed the rows are missing its border-bottom for some reason. This happens on the newest version of Chrome (v69). On version 68 the rows at this top value and more arent rendert at all.
They are still there, you can see them via the inspect tool on the browser.
Does the number 16777150 has something to do with JavaScript or Google Chrome?
On Edge browser something different happens. If the parent div of the virtual table exceed the height of 10737418px, the rendered height of this div will be only as big as its content height So if the last row is ending at top 900px, the table will be 900px height too. If you scoll further down and the new row is rendert, the div will get bigger too. But in the inspector you can see the right height value in this element and it doesnt change at all.
To post this link I need this code..
Here is the Code exampel.
If you want it to test it yourself, the .js and .css are in the github of this tablescript in the example folder.
Maybe this hase something to do with the browsers or JavaScript so I ask this question here.
I dont know how your table is being displayed.
But it's not a good practice to display this much entries at once. Try to use pagination.
Have a look at https://datatables.net/ and try to dynamically load table entries (like pick it up from database or something like this)
You had mentioned that tablescript also do the same thing and i see that after many records it display so long empty space without data.
But here, I want to confirm with you that if you use the pagination and display 20 rows at a time then it should work without any issue.
Then why you want to display large number of records?
If you have any issue with 20 rows then try to let us know about that.
We will try to find the solution for it.
Regards
Deepak
I've got a large table, where the user typically needs to scroll the page to find data. This makes it difficult to track columns/rows once the headers are no longer visible. I'd like to keep the headers visible while scrolling.
I've managed to get the first row (column headers) to stay visible (jsfiddle example), but am at a loss to do the same for the first column.
PS: I don't need an iframe solution (with extra scrolls), but one similar to what I have, but for the first column.
EDIT: I've done it: jsfiddle example
Using JS seems to be a bit overkill for this solution. Working with tables can be a pain in the neck, but there's a CSS property called position: fixed which could be used for this purpose. I've put together a demo which isn't 100% perfect when it comes to lining things up, but it demonstrates how to use it for your application.
DEMO: http://wecodesign.com/demos/stackoverflow-7433377.htm
For those interested, I fixed the flickering and the flipping, and the result is now perfect (for me). (jsfiddle example)
Wondering if anyone can help with this.
I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.
Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.
I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.
Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?
I tried disabling the 'spacer' cells but could not really understand how its done :/
Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.
(The far right and left blocks need to be up against the end of the container)
JSFiddle: http://jsfiddle.net/JsJMH/
Any help would be really appreciated! Many thanks!
Answer: http://jsfiddle.net/morrison/JsJMH/13/
Notes:
Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td.
I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
This is very possible without using tables: http://jsfiddle.net/morrison/quneb/.
I created a some javascript/jquery code to filter an html table. The filter works by assigning two classes to the rows ('show' and 'hide') depending on the value of certain cells and then using CSS to hide the rows with the 'hide' class. The filter works perfectly. However, when I apply the filter, somehow the table row height keeps changing (usually the height increases significantly - ~ 2 or 3 times the desired height). I have no idea why this is happening. My code is a few hundred lines so I don't think it would be worth pasting here. And I have no idea which section(s) of my code are causing the problem (or whether the issue is with the javascript/jquery or external css file).
Can anyone offer some suggestions for how I can best debug this problem?
EDIT: In addition to the row height increasing (the main problem), the column width also shrinks a little when the filter is applied.
UPDATE: I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.
Are you trying to do something like this.
If so then see if that helps or if you can put a sample like that which replicates the problem.
What I can think of is:
1: The class that is being applied when your hide/show has some issues.
2: The elements on which you are trying to apply the classes are wrong.
May be you can post some sample markup before and after filters.
I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.