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