I created a custom table using div's (was only solution due too complex behaviour). But I have a problem with the header and the footer.
The table htmlis basically simple:
<div class="table">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
What I need is the following: when the content inside the table is not too large to be viewed without scrollbar the header will just be at the top and the footer just below the content (so not sticky to the bottom of the container).
But when the content of the table expands (either on page load with new data or by expanding some table content using javascript/jQuery) I need the header to stick at the top of the container and the footer stick at the bottom of the container while the content can scroll without overlapping the header/footer.
I searched around a lot on this but haven't found a decent solution, is there a way to solve this (as simple as possible) using css and/or javascript/jquery?
Edit
Here a basic sample of what I mean: jsFiddle
If you click the span in the example the header and footer should become fixed at the top and bottom of the container. But how do I detect the increase in size?
.offset() + .scrollTop() = DISCO
Basically (jsfiddle demo):
function placeHeader(){
var $table = $('#table');
var $header = $('#header');
if ($table.offset().top <= $(window).scrollTop()) {
$header.offset({top: $(window).scrollTop()});
} else {
$header.offset({top: $table.offset().top});
}
}
$(window).scroll(placeHeader);
In other words, if the top of the table is above the scrollTop, then position the header at scrollTop, otherwise put it back at the top of the table. Depending on the contents of the rest of the site, you might also need to check if you have scrolled all the way past the table, since then you don't want the header to stay visible.
And don't forget about $(window).height() for doing the same with the footer.
This is a complete violation of the language's semantics, and as a result it likely completely destroys all accessibility. Use an HTML table instead.
<table id="mahTable" summary="some descriptive summary">
<caption>This descriptive data visually appears outside your table.</caption>
<thead>
<tr><th>Header Cell</th><th>Other header cell</th></tr>
</thead>
<tbody>
<tr><td>data 1</td><td>data 2</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">footer here</td></tr>
</tfoot>
</table>
To say this is not possible in your current code/programming means you entirely need to rethink your approach. Get the HTML correct first and then figure out presentation later. If you are too busy fretting over presentation before you have addressed the needs or structure of your content then your presentation will likely fail anyways.
Related
I am trying for the last complete week to have html table with fixed header, dynamic column widths and horizontal scroll. There are many options already available but each one lacks or misses a part of requirement.
Any help would be appreciated.
#ashish - Not too sure on the dynamic width aspect, but I could possibly point you in the right direction with your other concerns. As far as the header, try something like this:
.th { position: fixed; }
For the horizontal scroll, try adding a container div around the table in your HTML, like so:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Hope this helps!
I have created fiddle regarding the problem issue in link here
Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.
Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:
.top{
margin-top:100px;
}
Add this to you div with ".content" Like so:
<div class="content top">
Then just toggle it on the 2 clicks like:
$( ".content" ).toggleClass( "top" );
You can give additional styles, but this is the basic run down.
Update :
If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
Source
Old Answer :
There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.
See this : https://jsfiddle.net/d0pyxdoj/3/
P.S. Header/Footer have position fixed in your code, not absolute
Please check the below example. Height identification using script we can inject the spacing.
Script:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
Example Fiddler : https://jsfiddle.net/scj4u0t5/1/
I have a fixed header scrolling table with horizontal and vertical scroll bars, for which I can presently sort on each column but am unable to properly preserve horizontal position of the table when loading the page.
Using the following inline css I get scrollAmount from php from a hidden input whose value is from a jquery code and input it into the inline css
style="transform:translateX(<negative offset value of scrollAmount>)"
My question is how do I properly maintain scroll position for a table that overflows with a horizontal scroll bar using CSS and jQuery without waiting for the page to completely load / finish rendering?
Inline style
transform:translateX(-<?=scrollAmount()?>px)
jQuery Scroll Position Function
function setScroll(id_header, id_table)
{
$('div.'+id_table).on("scroll", function(){ //activate when #center scrolls
var left = $('div.'+ id_table).scrollLeft(); //save #center position to var left
$('div.'+id_header).scrollLeft(left); //set #top to var left
$('#scrollamount').val(left);
});
Hidden Input HTML Code
<input type="hidden" id="scrollamount" name="scrollamount" value=<?=scrollAmount()?>"/>
PHP Code
function scrollAmount()
{
if (isset($_POST['scrollamount']))
return $_POST['scrollamount'];
return "";
}
The problem is that .scrollLeft() will change every time you scroll, so you're simply setting it to where it's scrolled to. You could probably find the position of the table with jQuery, set that to a universal variable at the start, and then later use $('div.'+id_header).scrollLeft(globalLeftPosition) to set it. Hope this helps.
Using the following code, I was able to produce a visually acceptable solution that keeps the table horizontally offset by the user's scrolled amount.
JS Code - Executes on document.ready() when table has finished fetching/loading
//Translate 0px, undoing the original translation
$('table#'+ id_table).attr("style", "transform:translateX(0px)");
$('table#'+ id_header).attr("style", "transform:translateX(0px)");
//Scroll left to the desired amount as defined in the hidden input `#scrollamount`
$('div.'+ id_table).scrollLeft($('#scrollamount').val());
$('div.'+ id_header).scrollLeft($('#scrollamount').val());
HTML / PHP Code - Fixed Header Scrolling Table (Header and Table Body)
<div class="summary_header">
<table id="summary_header" border=1 style="transform:translateX(-<?=scrollAmount()?>px)">
... <-----Table Header Definition
</table>
</div>
<div class="summary_table" style="overflow-x:scroll">
<table id="summary_table" style="transform:translateX(-<?=scrollAmount()?>px)">
... <--Table Body Definition
</table>
</div>
I'm trying to create a datagrid table that will allow me to fix the header. I have placed the table within two DIV elements and fixed the THEAD portion of the table. I populate the table dynamically and there can be a different number of columns and may have different widths each time.
<DIV style="position: relative; width="500px">
<DIV style="height:105px; overflow: auto;">
<TABLE width="502px">
<THEAD>
<TR style="left:-1px;top: 0;position: absolute;">
... header content ...
</TR>
</THEAD>
<TBODY>
... data columns ...
</TBODY>
</TABLE>
</DIV>
</DIV>
The solution works well for the vertical overflow. However, I'm struggling with the horizontal overflow. Because I fixed the THEADs TR element, if my table exceeds the DIV width, the horizontal scrollbar appears and I can scroll the data horizontally, but the titles are static and don't scroll.
I was thinking that I might be able to somehow scroll the table header using jQuery if I could get the id/name of the dynamically created scrollbar, but I don't know if this is the right solution or if it is even possible.
A ton of people have tried to make fixed headers and left columns for tables using html and css, that stay put while you scroll, and unfortunately it doesn't work.
Your only option is to use javascript to manipulate the table as it scrolls. I have no specific code to recommend, but do some google searches.
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!