YUI Datatable Width

Question

This may seem like a basic question, but I'm having trouble figuring out how to set the table width to 100% on a YUI datatable.

I tried doing

#dtContainer {
    width: 100%;
}

#dtContainer table {
    width: 100%
}

but none of these approaches work.

To clarify, I am trying to set the datatable width to 100% when the table is empty and the empty message is displayed.

The generated table is an HTML table; so, I thought this should work. Thanks, Abe

Answer 1

this is an ugly solution. but it works

<script>
window.onload = function() {
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width
= "100%"',1000);
};
</script>

the problem is applying the style pre render is pointless, the javascript is building the table, post render is all I could get to work.

Answer 2

It turns out the solution is really simple:

.yui-dt table
{
    width: 100%;
}

Answer 3

looks like this little style tag works magic:

 .yui-dt table { width:100%;}

Answer 4

.yui-dt table { width:100%;}, .yui-dt table { width: 100%; }, doesn't work correctly.

Answer 5

table displayed out of document flow, when I using .yui-dt table { width:100%;} style. (ie6, ie7, ie8, ff3, yui dataTable-min(version 2.8))

Answer 6

Dont use .yui-dt table { width:100%;} , It doesn't appear to set the column widths correctly. Use myDataTable.setAttributes({width:"100%"},true); after table render