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.
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 this simple html table
<table id="tablex">
<tr>
<th>col1</th>
<th>col2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
and I tried to make it's columns resizable with colResizable
but the problem is when I resize a specific column of the table, the next column to the resizable one is affected because the full width of the table is fixed.
I have tried another solution posted here and other one here but the same problem was present.
Is there an other way to make columns resizable using one of jquery libraries or javascript function?
you can use colResizable 1.5, it allows two different methods of resizing the table: fixed and non-fixed.
By default, it is fixed, which means that when you resize a column, the next one shrinks or expands to fit the whole table. In fixed mode table width does not change at all.
I think you are asking for the non-fixed mode. In non fixed mode you can resize each column independently, so if you change the width of a column the others remain in the same state (but the table will increase its size by the same amount as the column does).
You can check some examples on its website: http://www.bacubacu.com/colresizable
but I guess that you are looking for something like this:
$("#nonFixedSample").colResizable({fixed:false, liveDrag:true});
I had the same question: Resizable table columns with jQuery (table wider than page)
My solution was to place contents of my column headers <th>s inside another tag- I used links (<a>s).
Instead of doing anything with the <th> I had to set the style of the <a>s to display: block
Then just $('th a').resizable({handles:'e'});
See http://jsfiddle.net/u32a1ccL/
This uses jQuery and jQuery UI
I have tried so many solutions to freeze first column and header(which have multiple rows) but in every solution i have to user custom css (css according to solutions).
In my case I cannot change my previous css. I want code in which on div scroll I can freeze my table(which is dynamic).
Please provide solution.
I've done this like this:
<table style="table-layout: fixed">
<tr>
<td><div style="width:100px; position:fixed;">Frozen Header text</div></td>
</tr>
<tr>
<td>Some data</td>
</tr>
<table>
I am not sure how to get the first column frozen as well, but I suppose you can attempt to use the same strategy, as well as formatting using the <col> tag, similar to this:
<col style="width:100px; position:fixed;" />
Try that, and please let us know how you go.
To achieve what I comets jquery and css use. Here the plugin:link
This is a jQuery plugin that can make table rows and columns not scroll.
It can take a given HTML table object and set it so it can freeze a given number of columns or rows or both, so the fixed columns or rows do not scroll.
The rows to be frozen should be placed in the table head section.
It can also freeze rows and columns combined with using colspan or rowspan attributes.
Fix header is relative simple and easy to implement. and column is a different thing.
for example:
<table>
<tr class="header"><td>header</td></tr>
<tr><td>body</td></tr>
</table>
You have to monitor onscroll envent, and detect if the header is out of view.
When it's out of view, retrieve tr.header's size parameters (also include TDs inside), and its clientX and clientY by using getBoundingClientRect(). make a clone of tr.header by using cloneElement(true) and place it in the same table. then assign size parameters to its TDs, and make this cloned element fixed to screen.
This solution won't not affect your table's styles or layout, while it is complex indeed.
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.
I am work on outlook designing in my menu page.
In that I have done the drag the td and height of td (id="leftContent") is increase, but problem is when I increase the height of td (id="leftContent") then automatically increase the height of td2(id="RightContent").
So how to increse the the height of only left td without affecting the right content.
My sample table code
<table>
<tr>
<td id="leftContent"></td> <!--This is just sample code because original code is very long and in left and right -->
<td id="RightContent"></td> <!--content have many table and TD and tr-->
</tr>
</table>
This is the table html markup.
I tried to solve this problem by taking both td in separate div tags
as following:
<div>
<td id="leftContent">
<div>
<div>
<td id="RightContent">
<div>
but this did not even work .
I tried to change position like absolute, relative, static, and fixed, apply all the property to right content but when I drag the td then automatically increasing the height of right content with left content.
This is just the way tables work. tds within a given tr are always the same height.
(I assume that the lack of closing tags in your example is just an oversight.)