i actually started with more than one table, and my clunky code was
working, but not clean. The following is the original for 2 tables.
$(document).ready(function() {
//usertool-search-user
$(".searchUser tbody td:first-child").css({"width":"80px"});
$(".searchUser tbody td:nth-child(2)").css({"width":"110px"});
$(".searchUser tbody td:nth-child(3)").css({"width":"145px"});
$(".searchUser tbody td:nth-child(4)").css({"width":"70px"});
$(".searchUser tbody td:nth-child(5)").css({"width":"100px"});
$(".searchUser tbody td:nth-child(6)").css({"width":"100px"});
$(".searchUser tbody td:nth-child(7)").css({"width":"236px"});
//usertool-search-account
$(".searchAcct tbody td:first-child").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(2)").css({"width":"130px"});
$(".searchAcct tbody td:nth-child(3)").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(4)").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(5)").css({"width":"80px"});
$(".searchAcct tbody td:nth-child(6)").css({"width":"190px"});
$(".searchAcct tbody td:nth-child(7)").css({"width":"201px"});
$(".tbl tbody td").each(function(i){
var $tdWidth = $(this).css("width");
$(this).children().css({'overflow':'hidden','width':$tdWidth});
});
});
i tried to adjust the code (above) with the (cleaner) sample Karl
Swedburg suggested, but i have not been successful, yet. i am trying
to do this for about 10 tables altogether. any help or direction to
similar example would be appreciated. This worked when i used it for a
single table, i just don't understand how to set the same method up
for multiple tables (all with different cell arrays and widths).Thank
you.
$(document).ready(function() {
$('.searchUser tbody td') function() {
var cellWidth = [80, 110, 145, 70, 100, 100, 236];
for (var i=0, cl= cellWidth.length; i<cl; i++) {
$('td:nth-child(' + (i+1) + ')').width(cellWidth[i])
.children().css({overflow: 'hidden'}).width(cellWidth
[i]);
};
};
$('.searchAcct tbody td') function() {
var cellWidth = [80, 130, 80, 80, 80, 190, 201];
for (var i=0, cl= cellWidth.length; i<cl; i++) {
$('td:nth-child(' + (i+1) + ')').width(cellWidth[i])
.children().css({overflow: 'hidden'}).width(cellWidth
[i]);
};
};
});
On Jan 8, 11:22 am, roxstyle <resut...@gmail.com> wrote:
> thank you, so much. I need to think less in css and more in jquery.
> And also thank you for your great site, i just found it, and ordered
> your book.
>
> On Jan 8, 7:38 am, Karl Swedberg <k...@englishrules.com> wrote:
>
> > This might be a little cleaner:
>
> > $(document).ready(function(){
> > var cellWidth = [80, 110, 145, 70, 100, 100, 236];
> > for (var i=0, cl= cellWidth.length; i<cl; i++) {
> > $('td:nth-child(' + (i+1) + ')').width(cellWidth[i])
> > .children().css({overflow: 'hidden'}).width(cellWidth[i]);
> > };
> > });
>
> > (untested)
>
> > --Karl
>
> > ____________
> > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > On Jan 7, 2009, at 5:26 PM, roxstyle wrote:
>
> > > $(document).ready(function(){
> > > $(".searchUser tbody td:first-child").css({"width":"80px"});
> > > $(".searchUser tbody td:nth-child(2)").css({"width":"110px"});
> > > $(".searchUser tbody td:nth-child(3)").css({"width":"145px"});
> > > $(".searchUser tbody td:nth-child(4)").css({"width":"70px"});
> > > $(".searchUser tbody td:nth-child(5)").css({"width":"100px"});
> > > $(".searchUser tbody td:nth-child(6)").css({"width":"100px"});
> > > $(".searchUser tbody td:nth-child(7)").css({"width":"236px"});
>
> > > $(".tbl tbody td").each(function(i){
> > > var $tdWidth = $(this).css("width");
> > > $(this).children().css({'overflow':'hidden','width':$tdWidth});
> > > });
>
> > > });
>
> > > ok, i have this working for my sample. Along with some added insight.
> > > (1) the children need to inherit the "td" given width- not the width
> > > that the browser sees. (2)The only way i could get this to inherit, is
> > > to have the width declared inline (now generated from the js file and
> > > not the css file), then the children can inherit the style "width".
> > > I do not like all these inline styles showing up in the code,
> > > but...its working.
>
> > > On Jan 7, 12:06 pm, amuhlou <amysch...@gmail.com> wrote:
> > >> you're quite welcome :)
>
> > >> On Jan 7, 3:02 pm, roxstyle <resut...@gmail.com> wrote:
>
> > >>> thank you so much, that is going to work.
>
> > >>> On Jan 7, 11:55 am, amuhlou <amysch...@gmail.com> wrote:
>
> > >>>> I accidentally replied directly to the author, so for anyone
> > >>>> curious
> > >>>> about the same thing, you could use the following code:
>
> > >>>> $(document).ready(function() {
> > >>>> $(".tbl tbody td").each(function(i) {
> > >>>> var $tdWidth = $(this).width();
> > >>>> $(this).children().width($tdWidth);
> > >>>> });
>
> > >>>> });
>
> > >>>> This code goes through the .tbl table, and for each td it finds its
> > >>>> width and then applies that width to its children.
>
> > >>>> On Jan 7, 2:04 pm, roxstyle <resut...@gmail.com> wrote:
>
> > >>>>> no, not exactly.
> > >>>>> if the div contains a long email or url with no spaces-the div
> > >>>>> will
> > >>>>> expand beyond the intended width set for the "td" and essentailly
> > >>>>> break the table layout. What i am trying to achieve is to place
> > >>>>> the
> > >>>>> actual "td" content in a "div" and have the "div" (1) inherit the
> > >>>>> parent td width, with (2)overflow: hidden. I have already given
> > >>>>> the
> > >>>>> overflow property in the stylesheet. I am thinking I need to
> > >>>>> have js
> > >>>>> that will automatically give any nested "div" the width of its
> > >>>>> parent.
>
> > >>>>> in my
> > >>>>> samplehttp://www.roxstyle.com/projects/blssi/cms/user-tools-v1/user-search
> > >>>>> ....
> > >>>>> if you click on the "search" for the user tab (default tab)-
> > >>>>> there is
> > >>>>> a result table with sample content like this.
> > >>>>> in row one- the content for the third cell expands.
> > >>>>> in row two- the content has an inline style for the width, and
> > >>>>> in this
> > >>>>> case the content "cuts off" at this width.
>
> > >>>>> i hope this makes sense, i am more css/html experienced than js
> > >>>>> experiened. i would appreciate any help, if i am not explaining
> > >>>>> the
> > >>>>> intended behavior
>
> > >>>>> On Jan 7, 1:10 am, peet <peetkl...@gmail.com> wrote:
>
> > >>>>>> isn't that not the same as setting "width:100%" to all childs?
>
> > >>>>>> On Jan 7, 2:42 am, roxstyle <resut...@gmail.com> wrote:
>
> > >>>>>>> I have a table where each td has its width declared in css
> > >>>>>>> rules.
> > >>>>>>> Inside some "td" i have either "p" or "div"
> > >>>>>>> I want to have these elements inherit the width of the parent
> > >>>>>>> td.
> > >>>>>>> I have a sample here
> > >>>>>>> -http://www.roxstyle.com/projects/blssi/cms/user-tools-v1/user-search
> > >>>>>>> ....
> > >>>>>>> if you click on the "user" search, you will get a results
> > >>>>>>> table and
> > >>>>>>> several of the td have got purposely long (non-spaced text)
> > >>>>>>> the tds have a width within css, but the div does not inherit
> > >>>>>>> that. If
> > >>>>>>> i give the div the pixel width, with overflow:hidden - i get the
> > >>>>>>> results i want -the table structure stays in place and the
> > >>>>>>> extra text
> > >>>>>>> is hidden
> > >>>>>>> i would like to make a function that would globally give the
> > >>>>>>> css width
> > >>>>>>> of each td to its children
>
> > >>>>>>> im trying things like:
> > >>>>>>> $(document).ready(function(){
> > >>>>>>> var d = (".tbl tbody td div");
> > >>>>>>> var d_p = $("d").parent('td');
> > >>>>>>> function inheritWidth() {
> > >>>>>>> $("d").width(d_p.innerWidth());
> > >>>>>>> }
>
> > >>>>>>> });
>
> > >>>>>>> i know my knowledge of js is basic. Is there any tutorial, or
> > >>>>>>> a sample
> > >>>>>>> on the jquery site that is similar to this functionality i am
> > >>>>>>> looking
> > >>>>>>> for?
