I have a table having td with two div's.Now, On clicking a div should expand second div and the td should also get expanded.Again on clicking the div the td should come to normal width
mixing table layout (deprecated) with div box model can result in really strange stuff...
You'll probably not want that, but anyway:
You will need JavaScript to change the second Div's dimensions, and from what I understand you want an easing animation as well. I propose taking a look at mootools or scriptaculous, if that is so.
Please allow me to break down the literal meaning of your terrible post, so you can appreciate just how frustrating it is to try to answer these spur-of-the-moment/last-ditch-effort creations.
I have a table having td with two div's
<table>
<tbody>
<tr><td><td><div></div><div></div></td></tr></tr>
</tbody>
</table>
Notice how this code is rather bland, uninformative, and probably not an accurate representation of what you're dealing with? That's because it's all that you've provided. Next time maybe try including and link to your page, a jsFiddle, or maybe even just a more precise explanation.
Now, On clicking a div should expand second div and the td should also
get expanded.
Expand what? How much? What about the row height or column width? Does the table need to stay the same size? How about any shred of direction here. If all else fails, before and after pics drawn in MSpaint are fine.
Again on clicking the div the td should come to normal width
Although this really isn't an English sentence I think I get the gist. However, this "width" information is probably part of the unspoken meaning of "expand" we talked about earlier. Bottom line: provide some html; get a concise answer.
Try this
var oldWidth = 200;
var newWidth = 200;
$("td div:first").click(function(){
if(!$(this).next("div").is(":visible")){
$(this).next("div").show('slow');
$(this).closest("td").width(newWidth);
}
else{
$(this).next("div").hide('slow');
$(this).closest("td").width(oldWidth);
}
});
Related
I have a wide table – possibly very wide – and I want the table to be as wide as necessary to fit everything, i.e. as-if it the width was auto (and the screen was wider).
But, by default, tables seem to never exceed the size of their containers!
I've found an answer using JavaScript, but is there a pure CSS answer too? Or a better JavaScript solution?
Here's a JSFiddle fiddle with an example table. Note that in this example the content is bigger than the 'screen', but the desired effect should cause the width of the cells to be large enough so that the text of each cell is all on a single line.
Per GChabot's answer, I don't want the cells to be bigger than their contents. Per their subsequent comment, by "fit everything", I'm of course referring to the Goldilocks fit, i.e. just enough so that contents don't wrap, but no larger.
Set the cells up so they do not wrap
td { white-space: nowrap; }
Depending on what you mean by "fit everything", you might want to define a min-width for your tds:
min-width:250px;
That way, each cell has a reasonable size to display some text, on one or more lines (or just one if you set them as nowrap as epascarello suggested). If you are displaying fixed-size element (such as images), the table should expand by default.
CSS overflow should fix your issue take a look at this post http://css-tricks.com/the-css-overflow-property/
Here's the quick-and-dirty JavaScript I'm using now:
$('#table-container').attr('style', 'width: 1000%');
$('#table-container').attr('style', 'width: ' + $('#tblMain').width() + 'px;');
#table-container refers to a div surrounding the table; the table has an id of tblMain.
I know this won't work if the table is 10 times wider than the current screen size, but a general solution should be pretty easy to implement.
I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..
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/
In other words, is there a way to get width of cell text in spite of overflowing?
There's a concept of a 'text node', but frankly I don't know how to access its width. My first instinct is if it's a must-have, wrap the cell contents up in a span and get the span's width. Strikes me as kind of ugly, but sometimes purpose is more important than appearance. ;-)
$('td span').width(); // the width
Fiddle: http://jsfiddle.net/Cvv4b/
If you really need to avoid the span, you could write a wee little utility that gets the text, copies it into a hidden element that doesn't have a width restriction (this element could be created on the fly if need be), and return the width of that hidden element.
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