$(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?
