Develop Reference

Is it possible to generate callout/indicator ("continues...") when table breaks across column or page?

We are designing HTML pages for print and one of the requirements for tables is, whenever a page or column break occurs, to generate an indicator like "Continues..." below the table before the break (page or column) and in the header of the continuation of the table, another indication, like table title and the text "Continued", followed by the normal flow of the content.
For the top-level container, we are planning to use CSS multi-columns and normal html table element for the table. It seems CSS columns do not expose any pseudo-classes to decorate the column breaks.
Below is the layout I'm looking for,

Here's how I'd approach it:
Put hidden div above table
<div id="cont-label" style="display:none;">Continues...</div>
Know table size
By either sending its size to UI, or getting its size usign javascript:
var size= $('#mytable tr').length;
size is saved in javascript or in table div data attribute data-size=12
Know if table is "chopped"
If table on home is displaying a number of rows that's less than table size, either by counting rows or by having fixed number of rows displayed (depends on your design). Let's say displayed size is displayedSize.
Compare and act
Better to be in jQuery
Get both size and displayedSize and compare:
if( displayedSize < size ){
$("#cont-label").show();
}
I will assume that the next page will always show the text "Continued" because otherwise why have full page for table in the first place. I see you display the whole table and not the chopped part only ad this makes implementation easier, please correct me.

Trigger event on hover over the html table

What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.

Stop Dynamic Table Resizing

I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.

If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.

dataTable header with rowspan resizes and mess UI

I had been developing a screen which has lots of data as . It is scrolling with dataTable.(Horizontal Scroll). There is a drpdown which should filter values and should show only eligible TDs in scroll part. Below are Screenshots. I am hiding and showing data based on selection of a dropdown.
Have added a class to all tds and rowspan th so that they can be toggled based on selction of dropdown.
It Shows perfect while fetching all the records. But when I hide columns , columns work perfect but header resizes its headings.
Here is what happens on hiding th and td .td remains same , th resizes
I tried a lot but cud not fix it. Can someone plz help

So I got the solution .
U need to get your table object again and redraw it. After reading so many places about this error it seemed dataTable is still to find a fix for hiding columns in scroll part with rowspan added to it.
What I did was adding a class to all th, td of table which needs to be hidden based on any condition , here based on selection. When I was selecting a partical type I added another class to hide the required th and tds. But Th reset sizes ,might be because of scrolls added.
It resets width of entire header leaving your td as it was . So it looks ugly.
oTable.fnDraw();
Just take reference of your table and draw again.

Data grid table in div (no fixed width)

I have a data grid table (div based) that not in table format. I have done it in div based format with fixed width cell.
My problem
If I have add the column in the grid table, it will adjust like table format.
How can I do it?
Above table I need to add the column but it's all fixed width cell, if I add extra column the
table collapses.

This is possible without table.
Just see below the link.
http://jsfiddle.net/anglimass/BkwgY/2/