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.
Related
I'm creating tables dynamically based on user data, using Handsontable.
Question: How do I tell handsontable to adjust the height of rows and the width of columns based on the data and the available space?
Maybe this can help:
It is also possible just with CSS but probably you will have to override default min-width for td, th.
Check out this fiddle: http://jsfiddle.net/warpech/z9fYC/
or try also this:
I'm not sure if there is build in function to control this, however, there is hack using css width: in style
style: {
width:'800px'
}
A working example is here http://jsfiddle.net/FDpvV/1/
Here a hint: https://docs.handsontable.com/0.35.0/demo-scrolling.html
I'm having some weird issue with widths of table cells. All I try to do, is to get the width of the table cell using .width() function, then set that width on the same cell in width attribute:
$table.find('tr:first td').each(function () {
var actualWidth = $(this).width();
$(this).attr("width", actualWidth);
});
Every time I do that, it gets a different width for some cells (Usually reduces one and increase another).
I saw a similar question from 2012: jQuery width() returning incorrect values on table cells
But it's quite old and the accepted answer doesn't seem to work.
fiddle: https://jsfiddle.net/awolf/40pj1b2u/
Any help will be appreciated.
I think there are two problems in one. All related to the table-cell display.
The use of border attribute (border="1") in the
<table> probably messes up the width value when read. Probably the same when setting attr('width') value. In order to match the closest real value, you can use innerWidth() as #Adam P suggested.
Table cells width depends on the full available table width. In your jsfiddle sample, when expanding the table zone, cells' width are increasing. So, from each cell Width, you can compute the global table width, and apply it.
See this https://jsfiddle.net/piiantom/72dvm0v4/, taken from yours, with JS adjustments.
Table border can be changed, the JS still works
I would consider this a bug.
My interpretation:
When reading the width, it gets the content-width.
When setting it, the box gets rendered and then the border set (taking 1px from content each time).
Same with .attr(), .prop(), and .width().
Have a look at box-sizing, .innerWidth() and .outerWidth()!
I need to style a table added dynamically to my page by maybe changing the CSS settings/Styles. Somehow this has not work and I am looking for a way around this please. How do I resize table headers and columns for dynamically created tables?
Check out jquery .css()
http://api.jquery.com/css/
$("th").css( "width", value )
Jquery has some functions to dynamically change css properties. There are also some functions for width
$("th").width( value )
http://api.jquery.com/width/
Invoke these functions after the table is added to the page.
If the tables have id's or classes you can just target them directly in css. If they are being over ridden add an !important tag to them.
table#idhere {width:500px !important}
or
table.clashere {width:500px !important}
This will find the width of the table and then add it as an attribute so it will be set.
var tableWidth = $('#tbl_reportview table.report').width();
$('#tbl_reportview table.report').attr('width',tableWidth + 'px');
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/
I realize this question has been asked quite a bit on Stack Overflow; however, after looking through a number of them, I believe my question has one more requirement. I want to transform a regular html table, into a table that can be scrolled both vertically and horizontally, while the the header remains at the top. The width of this table exceeds the width of the page, so I need the headers to move horizontally as the table is scrolled. I would prefer to use a pure CSS method; however, I will use Javascript if necessary. Have yet to find a solution that does all of this.
This solution might work for you depending on the style of your headers. It's pure CSS.
http://salzerdesign.com/blog/?p=191
Why would you not just use a and set a height and width for it allowing overflow. Then just simply place your table in there and you are good to go.
To me that just seems like the most logic and easiest way to go about it...
well you can use JQuery to do this in few lines of code,
you can see my other post to create a table with fix header
and scrollable body
Create Table with scrollable body
after that lets imagine you have one div for the headers with class name = "Top1" and one div for the body with class name = "Top2", you can bind the scroll of one to the other
$('.Top2').bind('scroll', function(){
$(".Top1").scrollLeft($(this).scrollLeft());
});
$('.Top1').bind('scroll', function(){
$(".Top2").scrollLeft($(this).scrollLeft());
});
jsFliddle demo
Here is a good jQuery plugin, working in all browsers! (check out the demo)
The result is a table with a fixed header, scrolling (for the moment..) only vertically, but with a variable width.
I develop this plugin to meet the problem of fixed header + flexible width.
Check it: https://github.com/benjaminleouzon/tablefixedheader