how to style an AJAX-loaded fragment

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

I don't have much hope of an open-sesame answer to this question, but
here goes anyway.

Imagine I have a page arranged in an ordinary way:

<script ...> Javascript functions </script>
<style ...> styles </styles>
<div id="container">  //  getElementByID("container").parentNode ==

<table id="data">
[bunch of complicated data]

</div> // id="container"

I replace the table id="data" with new stuff when the user asks me to,
and that will work just fine, I do believe (it's working a little bit
now and as I say I'm a believer).

The "old" table depends heavily (maybe too much) upon the <style>
section in the <head>. But when the table of new, refreshed data shows
up, of course it's completely unstyled. I haven't found a way to get
the browser to apply styles from that section or from an external
stylesheet to the new table.

Has anybody any ideas about how I can get the new, AJAX-downloaded
stuff to acquire some style? Short of styling every single <th> and
<td> and increasing the ratio of data / style to some number even more
gigantic than it is now.

I do see ( )
that I can put out an HTTP header:

  Content-Style-Type: text/css

but I don't think that helps the browser find the styles I want.

Thank you, everyone.

-- ben

Site Timeline