Setting innerHTML reformats table

[gesres]

I have some column headings whose widths are set via styles:

<TR>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD class="head1" style="WIDTH: 120px">Stage</TD>
<TD class="head1" style="WIDTH: 90px">Est. Hours</TD>
<TD class="head1" style="WIDTH: 90px">Est. Delivery</TD>
<TD class="head1" style="WIDTH: 90px">Est. Cost</TD>
<TD class="head1" style="WIDTH: 200px">Comment</TD>
</TR>

When I set the value of a span in a cell using javascript

<TD><Span class="head1" id="TotalHours"
style="width:60px;text-align:right"></span></TD>

idTotal = document.getElementById("TotalHours");
idTotal.innerHTML = total;

all of the table columns shrink to the minimum size for the content,
ignoring the style width settings. Any suggestion as to why this might
be the case?

Thank you.

[RobG]

ge****@boundvortex.com wrote:

I have some column headings whose widths are set via styles:

<TR>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD class="head1" style="WIDTH: 120px">Stage</TD>
<TD class="head1" style="WIDTH: 90px">Est. Hours</TD>
<TD class="head1" style="WIDTH: 90px">Est. Delivery</TD>
<TD class="head1" style="WIDTH: 90px">Est. Cost</TD>
<TD class="head1" style="WIDTH: 200px">Comment</TD>
</TR>

When I set the value of a span in a cell using javascript

<TD><Span class="head1" id="TotalHours"
style="width:60px;text-align:right"></span></TD>

idTotal = document.getElementById("TotalHours");
idTotal.innerHTML = total;

all of the table columns shrink to the minimum size for the content,
ignoring the style width settings. Any suggestion as to why this might
be the case?

I don't think this has anything to do with JavaScript. You have an
interaction between the HTML you are inserting, the head1 class, the
inline styles and whatever other style attributes that might be
inherited. You haven't shown the head1 style, or whatever else may be
affecting the table style-wise.

Trying asking in a CSS group:

news:comp.infosystems.www.authoring.stylesheets

They will appreciate a link to a page displaying the behaviour, or you
might post a minimal example.
--
Rob

[Danny]

Why does it happen? reflowing issues on the user-agent, specifically the one I've seen that is
Internet Explorer after doing some .innerHTML rewrites, not in geckos/opera, but in my case it
was white space property. I haven't bothered with it, since most times it works and I'm
assuming is some event being triggered upon a reflow, which omits the property, a Bug in IE
IMO, to be fixed at a newer version or service pack.

Danny

[Evertjan.]

Danny wrote on 26 jun 2006 in comp.lang.javascript:

Why does it happen?

Why does what happen?

Please quote on usenet.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Mitja Trampus]

ge****@boundvortex.com wrote:

When I set the value of a span in a cell using javascript
all of the table columns shrink to the minimum size for the content,
ignoring the style width settings. Any suggestion as to why this might
be the case?

Tables are flexible by design. Add table-layout:fixed to table's style to prevent this.
Visit w3c to see how it works...

Mitja

[Tony]

ge****@boundvortex.com wrote:

I have some column headings whose widths are set via styles:

<TR>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD style="visibility:hidden;width:0px">&nbsp;</TD>
<TD class="head1" style="WIDTH: 120px">Stage</TD>
<TD class="head1" style="WIDTH: 90px">Est. Hours</TD>
<TD class="head1" style="WIDTH: 90px">Est. Delivery</TD>
<TD class="head1" style="WIDTH: 90px">Est. Cost</TD>
<TD class="head1" style="WIDTH: 200px">Comment</TD>
</TR>

When I set the value of a span in a cell using javascript

<TD><Span class="head1" id="TotalHours"
style="width:60px;text-align:right"></span></TD>
How are you changing this?

What you show there has no style attribute for the <TD>. I also don't
see that cell anywhere in the sample.

I think you may need to provide more information. How about a link to
the page in question?
idTotal = document.getElementById("TotalHours");
idTotal.innerHTML = total;

all of the table columns shrink to the minimum size for the content,
ignoring the style width settings. Any suggestion as to why this might
be the case?

Difficult to say without seeing the actual code.

--
"The most convoluted explanation that fits all the available and made-up
facts is the most likely to be believed by conspiracy theorists"