i had an table like this
<div style="overflow:auto">
<table>
<thead><tr style="position:fixed"><th></th></tr></thead>
</table>
</div>
Now my problem is when i scroll div the header(that is tr element) is fixed it works fine but when i scroll the scrollbar of window the header tr is not fixed inside the div. I moves along the scroll bar of the window... Can any one help me to find out the solution please
I don't know If I'm getting your question right, but you may find this helpful http://fixedheadertable.com/
Sorry, I tried to do it in CSS alone, but that didn't work out, so you do need a bit of Javascript.
<div style="overflow:auto; position:relative;"
onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';">
<table>
<thead>
<tr style="position:absolute; top:0; left:0" id="fixedtr">
<th>Table header</th>
</tr>
</thead>
See jsFiddle.
This is how you want it, right?
Related
I have some page content in a React web app where certain fields should remain fixed as the user scrolls. The part that's throwing me off is this content is contained within a scrollable outer div. That outer div must remain scrollable because it occasionally loads different components that need it.
Here is the div structure:
<div class="inner"><!-- overflow-y: auto; (this must remain)-->
<div class="wrapper">
<div class="titleBar"> <!-- I need this to not scroll -->
<div class="mainTable">
<table>
<th>...</th> <!-- I need this to not scroll -->
<tbody>
...
</tbody>
</table>
</div>
</div>
</div>
</div>
So as the user scrolls down the page, the title bar and table header should remain fixed, with the table body content being the only thing on the page that is scrolling. I'm not able to just make the table body scrollable because that will put a scrollbar on the table itself, it needs to scroll on the actual page scroll.
Most posts on this I've been able to find are using JQuery, but since this is within ReactJS I'm looking for other solutions.
Correct table head structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
</table>
Then try customize thead th css as following:
thead th {
position:sticky;
top: 0
}
So I am trying to hide a DIV that sits inside a td. Issue I am facing is that the attached code fades the div perfect fine but the table space stays there. How do I make this table space disappear completely?
Table:
<table width="100%" id="myTabDiv">
<tr><td align="center"><div id="innerDiv"> This disappears </div></td> </tr>
</table>
Just to clarify, the solution was to wrap the table in another div and hide that div instead.
I've made a table with a fixed header that stops when it reaches the bottom of my table. which i put into a div with overflow: hidden;. I kind of got everything to work, but not 100% to my liking.
<div class="container">
<table class="tableWithFloatingHeader">
<thead>
<tr>
<th>table1 col header</th>
<th>table1 col header</th>
</tr>
<tr>
<th>table1 col header2</th>
<th>table1 col header2</th>
</tr>
</thead>
<tbody>
.............
</tbody>
</table>
</div>
problem is:
i can't seem to get everything in the <thead> to scroll down too.
only the 1st row does (the first <tr>).
ONLY the <th> visible in the div should be seen when
scrolling down.
How do i position my controllers right beside the div? On a bigger
monitor, it's position is way off (because of this 'left': '20px')
here is a link to my JSFIDDLE
and here is my html for my controllers
<div id="compare-table-controller">
‹
›
</div>
Demo
Changed width: 700px to width: 100% You can change left value like width value (percentage value)
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
Looking for a solution to create a table with a scrollable body, and a static/fixed header.
Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc.
To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option.
The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D
I've just put together a jQuery plugin that does exactly what you want. Its very small in size and really easy to implement.
All that is required is a table that has a thead and tbody.
You can wrap that table in a DIV with a classname and the table will always resize to fit in that div. so for example if your div scales with the browser window so will the table. The header will be fixed when scrolling. The footer will be fixed (if you enable a footer). You also have the option to clone the header in the footer and have it fixed. Also if you make your browser window too small and all columns can't fit...it will also scroll horizontally (header too).
This plugin allows the browser to size the columns so they aren't fixed width columns.
you just pass the DIV's classname to the plugin like so: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); and the plugin will do the rest. FooterID is a element on the page that contains the mark-up for your footer. this is used if you want to have pagination as your footer.
If you have multiple tables on the page it will also work for each table you want to have a fixed header.
check it out here: http://fixedheadertable.mmalek.com/
Keep in mind its still 'beta' so I am adding new features and bug fixes daily.
Supported browsers: IE6, IE7, IE8, FireFox, Safari, and Chrome
Here is a link to my response to another person who had the same question: Frozen table header inside scrollable div
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .
The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.
CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.
If you can fix the column widths - it's a lot easier. If you want the browser to figure out the widths, it gets a lot harder. Basically, have the table in div that scrolls (height, overflow:auto) and have that div inside a position:relative div. In the outer div, have another div position:absolute, overflow:hidden, height: whatever the header height is, set this div's innerHTML to the innerHTML of the inner div; Here is a page that demonstrates. There are lots of gotchas, but it's doable...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
Note as you refresh and the data size changes, the header matches up perfectly. That's the real trick.
I believe that the solution is to set an explicit height for the tbody and set the overflow to auto or scroll. Unfortunately, as you've discovered, tables and CSS are a tricky combination, and IE likes to choke on it.
How about this:
<table style="width: 400px;">
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>
There was also a quiz for just this sort of thing on Sitepoint, for those looking for a non-JS solution. However I found that the table footer was necessary for stopping the table headers from collapsing their widths IF the contents of the cells weren't wide enough. I ended up hiding the tfoot in the application I used this on.
It's pure HTML/CSS and works in IE6 plus modern browsers. There are some styling limitations for the header though.
Is there a CSS/JavaScript technique to display a long HTML table such that the column headers stay fixed on-screen and the first coloumn stay fixed and scroll with the data.
I want to be able to scroll through the contents of the table, but to always be able to see the column headers at the top and the first column on the left.
If there is a jQuery plugin that would be great! If it helps the only browser I care about is Firefox.
Working example of link posted by pranav:
http://jsbin.com/nolanole/1/edit?html,js,output
FYI: Tested in IE 6, 7, & 8 (compatibility mode on or off), FF 3 & 3.5, Chrome 2. Not screen-reader-friendly (headers aren't part of content table).
EDIT 5/5/14: moved example to jsBin. This is old, but amazingly still works in current Chrome, IE, and Firefox (though IE and Firefox might require some adjustments to row heights).
The jQuery DataTables plug-in is one excellent way to achieve excel-like fixed column(s) and headers.
Note the examples section of the site and the "extras".
http://datatables.net/examples/
http://datatables.net/extras/
The "Extras" section has tools for fixed columns and fixed headers.
Fixed Columns
http://datatables.net/extras/fixedcolumns/
(I believe the example on this page is the one most appropriate for your question.)
Fixed Header
http://datatables.net/extras/fixedheader/
(Includes an example with a full page spreadsheet style layout: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html)
I see this, although an old question, is a pretty good place to plug my own script:
http://code.google.com/p/js-scroll-table-header/
It just works with no configuration and is really easy to setup.
If what you want is to have the headers stay put while the data in the table scrolls vertically, you should implement a <tbody> styled with "overflow-y: auto" like this:
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
If the <tbody> content grows taller than the desired height, it will start scrolling. However, the headers will stay fixed at the top regardless of the scroll position.
In this answer there is also the best answer I found to your question:
HTML table with fixed headers?
and based on pure CSS.
I have created something which has fixed header, fixed footer, fixed left column and also fixed right column. This only works fine in IE. As most of the users are still using IE this can be helpful. Please find the code here in Scrollable Table. Please let me your suggestions.
Meanwhile I am working to fix columns in other browser. I will keep you posted. :-)
<script>
$(document).ready(function () {
$("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
$("#GridHeader table tbody .rows").remove();
$('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>
<div id="GridHeader">
<table></table>
</div>
<div style="overflow: auto; height:400px;">
<asp:GridView ID="GridView1" runat="server" />
</div>
Not quite perfect, but it got me closer than some of the top answers here.
Two different tables, one with the header, and the other, wrapped with a div with the content
<table>
<thead>
<tr><th>Stuff</th><th>Second Stuff</th></tr>
</thead>
</table>
<div style="height: 600px; overflow: auto;">
<table>
<tbody>
//Table
</tbody>
</table>
</div>
I know you can do it for MSIE and this limited example seems to work for firefox (not sure how extensible the technique is).
The first column has a scrollbar on the cell right below the headers
<table>
<thead>
<th> Header 1</th>
<th> Header 2</th>
<th> Header 3</th>
</thead>
<tbody>
<tr>
<td>
<div style="width: 50; height:30; overflow-y: scroll">
Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk
fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
</div>
</td>
<td>
Hello world
</td>
<td> Hello world2
</tr>
</tbody>
</table>
YUI DataTable
I don't know if YUI DT has this feature but I won't be surprised if it does.
Here is a good jQuery plugin, working in all browsers!
You have a fixed header table without fixing its width.
Check it: https://github.com/benjaminleouzon/tablefixedheader
Disclaimer: I am the author of the plugin.