Question

这似乎是一个基本问题，但我无法弄清楚如何在YUI数据表上设置表格宽度为100％。

我试过

#dtContainer {
    width: 100%;
}

#dtContainer table {
    width: 100%
}

但这些方法都不起作用。

为了澄清，当表为空并且显示空消息时，我试图将数据表宽度设置为100％。

生成的表是一个HTML表;所以，我认为这应该有用。

Answer 1

不要使用.yui-dt table {width：100％;}，它似乎没有正确设置列宽。使用myDataTable.setAttributes（{width：“100％”}，true）;表格渲染后

Answer 2

事实证明解决方案非常简单：

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

Answer 3

这是一个丑陋的解决方案。但它的工作原理

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

问题是应用样式预渲染是没有意义的，javascript正在构建表格，后期渲染是我可以开始工作的。

Answer 4

看起来这个小样式标签起作用了魔法：

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

Answer 5

为了保持不同分辨率的各种屏幕的宽高比，我不得不手动将列宽设置为总计100％的百分比。

<style type="text/css">

    /* YUI Individual Column Width */        
    #dvAutoWidthList .yui-dt-col-Col1{width: 35%;}
    #dvAutoWidthList .yui-dt-col-Col2{width: 10%;}
    #dvAutoWidthList .yui-dt-col-Col3{width: 15%;}
    #dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;}

</style>

PS：可能不是最好的方法，但它解决了我的问题！

Kwex。

Answer 6

var dataTable = new Y.DataTable(
          {
            columns: cols,
            data: remoteData,
            width: '100%',             
          }
        ).render('#dataTable ');

这应该可以解决问题。为我工作AUI 2.5.1

YUI数据表宽度

6 个答案: