We Keep Coding

How can I find the height of a dynamically created table row element with no height set?

I have two tables adjacent to each other both being populated dynamically in C#, I want both of these two tables to have the corresponding row height be exactly the same depending on what the first tables row height is (no specific height has been set, just needs to fit text in).
I have tried various ways of getting the height in C#, javascript, jquery, etc however they all return null or 0, i can get it to work by actively setting the height however this is not very effecient and occasionally buggy, is there a way I can get the height of a dynamically created html table row/cell?

#JoseRuiSantos comment is a better implementation if your design allows it (i.e. combine data in both tables in to a single table and accordingly render rows and columns to display as two different tables using css).
One way I could think is to try using javascript:
For this to work, do not set any table/row/column heights in both tables.
Add an empty column at the end of each table with a div element in it. In the page load completed event, identify the max column height in corresponding row of both tables and set the corresponding div element's (in both tables) height (in corresponding row) to the column max height.

how to set height and width for cells in backrid

i have integrated backgrid.js in my current assignment everything is working fine but i would like to know that how to set height and width for a cell in the backgrid table?
Is it possible to change the width and height of the backgrid table also how to use on mouse over events on the cell?

You can use jquery and CSS for changing cell height and cell width. You should also be able to use the css classes for cells to detect hovers as well.
Take a look at http://backgridjs.com/misc/styling.html. It explains all the classNames used for the different cell types.
Sorry I can't offer you any examples. I'd need a better explanation of your problem for that.

Yes, you can use CSS. You are using Backgrid so you have table with class 'backgrid'. Override existing Backgrid CSS. For example:
table.backgrid td {
//do something
}
Same as above, you can override height and width of backgrid table.

Javascript Fix Table Header

I am having trouble to fix the header of a table, here is my issue:
I used the same code from this post:
Table header to stay fixed at the top when user scrolls it out of view with jQuery
It is almost working, but the problem is the width of the header changed when I scroll down.
I wonder what I am doing wrong. I tried the following code to fix the width, but does not work.
$("#header-fixed td").each(function(index){
var index2 = index;
$(this).width(function(index2){
return $("#table-1 td").eq(index).width();
});
});
Here is the link:
http://vvb.me/test.html

The width of table cells is determined by not only the content of that particular table cell, but also the other cells in the same vertical column as it. This is because tables form blocks so the widths of the columns must line up.
What's happening here is that the calculated width of your attached thead cells is different from the widths calculated for your detached, fixed thead cells.
In the attached thead, the widths of the cells are largely determined by the data below. In the second instance, which isn't attached to the tbody, the width is solely determined by the header tds.
One solution would be to specify the width of the cells in both theads. As an example, specifying,
<td style='...; width: 50px;'>
on all of your thead cells would make them equal.
You could also use javascript to determine the width of each attached thead cell and set the bottom thead cells to be equal to their corresponding cell. Calculating the dimensions of DOM elements can be done with Javascript/Jquery. Check out answers like this one for methods on how to do that.

Make column width same for 2 tables

I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.

Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});

Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/

jQuery Sortable plugin on table cells shrink while dragging

I'm using the jQuery Sortable UI to be able to move the rows in a table but I'm having the following problem:
If any of the table cells have data that are not equal in size (which results to an increase or decrease in the width of the cell), the table cells (the tds) shrink while moving a row to a new position. You can see a demonstration here.
Also, how do I make it so that only when I click in the first column (the empty column at the beginning of the table) of the corresponding row that I should be able to move that row?
Any help please!!!!!!!
Thanks in advance

http://jsfiddle.net/tUa3w/6/
$('.test1 > tbody').sortable({
helper: function(event, ui) {
var myHelper = [];
myHelper.push('<table style="width: 100%">');
myHelper.push($(ui).html());
myHelper.push('</table>');
return myHelper.join('');
},
items: '.item1'
})
What I think is happening is that your helper element had no table to fill out its' width. It's not perfect yet but maybe you can take it from here or someone else can chime in.

I have updated the code here: http://jsfiddle.net/tUa3w/4/
Setting the width of the table to 100% and the td's width to 20% is the simple way. You could set the width of the table to 600px, and each td to 120px.
Use the 'handle' option for the handle.