Problem:
I have a table that is too large to be a liquid style element for mobile. My solution was to make the overflow-x: auto. Works great and is pretty much how spread sheets on mobile apps work. One problem, the table can be confusing to read with the header being within the offset-y portion. I sometimes find myself scrolling back up just to see what column of data I'm looking at.
Question:
Is there a way to keep the table header in a fixed position within the table itself using CSS/JS - jQuery so that when the user is scrolling through the data, the header is always showing just like you would expect it to be in a mobile app? (Numbers for mac also does this). I don't mind using CSS3 since this is for mobile.
Other Things That Have The Same Behavior
Apple Numbers When you scroll down and the headers should be out of view, they stay fixed until you pass up the table.
iPhone Instagram App when scrolling through feed, the user's header stays in view until new post shows up.
iPhone Contacts App When scrolling through All Contacts the letter section you're in stays on top until a new letter shows up.
I just want to make sure you guys know what I'm talking about because I couldn't find anything similar to what I wanted to do. Not sure If I'm typing in the wrong search terms or what. But it's pretty much a hybrid style between float and fixed.
Code drops has an excellent article on making the table headers fixed while scrolling.
The solution is based on JQuery and it works for both, row heading and column heading
Sticky Table Headers & Columns
This is what you're looking for: https://css-tricks.com/persistent-headers/
It's been done many times before.
Related
I have a this table:
`https://jsbin.com/hutifufisa/edit?html,css,js,output`
And I already fixed the first column using an example i saw here in stack, but if the table contains a lot of values and being responsive, it's not easy to know which value i'm checking because the header is not fixed when you scroll down, thinking about mobile UX, im using bootstrap to create the table.
Is it possible to keep the first column fixed, just like it already is, and also fix the header?
Thx!
for responsive table and UI good developers always used bootstrap.
responsive table bootstrap.
read this link https://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp for read more about responsive table and bootstrap(Bootstrap is so easy just used class and read and research)
I have a huge table that I want to show it on my website. It has got 60 columns and as many as 2000 rows. Could you please guide me how can I represent these data in the webpage. Right now, I made a scrollbar horizontal and vertical in the webpage and reproduced all the data. It seems clumsy and awkward. This is my first venture in web development, so anyone could guide on simplifying this complexity, it will be great help for me. What I am looking forward is when the user wants a row of data from the table, all those cells should be visible in the same page without the need for a scroll.
Can anyone guide me?
You could use jQuery DataTables with Responsive plugin which will hide extra columns could be shown when necessary.
See this example for demonstration of displaying extra details in a collapsible child row.
See this example for demonstration of displaying extra details in a modal window.
I have to render up to 1500 row using jquery plugin Datatables and twitter bootstrap css. In each row, there is a table that can contain up to 50 row.
Using chrome developper tools profiler and testing, the rendering is a real problem. For example, i have for 250 items displayed 219861 selector match for .table th, .table td.
How can i optimize this ?
I retrieve twitter bootstrap from bootstrapcdn
I am a framework developer and I can share some of things I have faced and remember at this moment
When writing table inside table layout, don't use
'box-sizing:border-box'
Instead use 'content-box', otherwise it will create gaps between rows, not columns if you have specified or not specified borders. No style will help you to remove that.. This is very important while implementing nested table layout
Even if you are using DIV with table layout, take care 'max-width' does not work properly in some mozilla versions, for that you may have to maintain a "wrapper" DIV that is occupying the 100% width and 100% height of cell.
Maintain block lever wrappers inside cells and apply skins to it if it is table, because hover and focus will not apply properly.. Example: half filled hover skin observed in some modern browsers as well.
And while embedding those many elements dynamically instead of creating elements on fly and appending, prepare HTML string and append it, it does perform very well.. I have observed this. But modifying html renderer might look dirty, but all we need is performance
These are some things I remember at this point of time. If I am wrong somewhere please correct me..
Suggestion If you are targeting mobile browsers as well, then go for table layout until unless you have good expertise in dealing with div layout. Floats does not work properly in some mobile devices. And tables scaled properly with media Queries in mobiles as well.
I recently had a similar situation with waaaay too much table data and had to solve it with pagination. The HTML has to pull all that info and build that massive table before it will even start to render it, thus the horrible slowness.
Finally i will limit maximum number of rows displayed to 200. No "display all the stuff" allowed.
I will try to optimize css too. Seems that there is a lot of definition of bootstrap css i don't use.
I saw a site a month or two ago that had anchors fixed to the right side of the page that would not scroll when the page was scrolled. That alone is not hard to do with CSS.
But on that site, the fixed anchors were dynamically generated based on the section headers in the page. And they were proportionately spaced down the right side of the page in relation to their position in the document.
In essence, it created a mini-map of the entire document, giving a visual overview of what was in the document, and the spacing between sections of the document, all within the current viewport. You could quickly see how large each section was in relation to each other. Maybe I should call it a table-of-contents instead of a mini-map.
I believe this was on a documentation page for an API of some sort. I think it worked really well for navigation, and want to build something like it for some documentation I need to do.
In a way, it reminded me of the minimap on the right side of Sublime Text 2, but only major headings were shown and they were depicted as buttons fixed to the right side of the page.
Unfortunately, I can't remember or find the site I saw it on. Has anyone seen an example of something like this? I'd love to see some examples before I start implementing it. Or do any tools exist for doing this, jquery plugins, etc?
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)