Is there a way to set the CSS information for a particular instance of YUI DataTable?

Question

The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?

I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.

Answer 1

Put your datatable in a specific div with an id

Or: Via the css selector : #yourdivid .yui-dt-data

Answer 2

Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.

Here's how from the open source Timeline project:

    // Use document for the doc param

    function includeCssFile(doc, url) {
    if (doc.body == null) {
        try {
            doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
            return;
        } catch (e) {
            // fall through
        }
    }

    var link = doc.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", url);
    getHead(doc).appendChild(link);
};

function getHead(doc) {
    return doc.getElementsByTagName("head")[0];
};