YUI 数据表宽度

发布于 2024-08-08 12:19:27 字数 267 浏览 2 评论 0原文

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

我尝试这样做，

#dtContainer {
    width: 100%;
}

#dtContainer table {
    width: 100%
}

但这些方法都不起作用。

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

生成的表格是一个HTML表格；所以，我认为这应该可行。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花心好男孩 2024-08-15 12:19:27

不要使用 .yui-dt table { width:100%;} ，它似乎没有正确设置列宽。使用 myDataTable.setAttributes({width:"100%"},true);表格渲染后

回复收藏 0 原文

瀟灑尐姊 2024-08-15 12:19:27

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

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

It turns out the solution is really simple:

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

回复收藏 0 原文

心病无药医 2024-08-15 12:19:27

这是一个丑陋的解决方案。但它有效，

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

问题是应用预渲染样式是毫无意义的，JavaScript 正在构建表格，后渲染是我所能做的全部工作。

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.

回复收藏 0 原文

北方。的韩爷 2024-08-15 12:19:27

看起来这个小样式标签很神奇：

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

looks like this little style tag works magic:

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

回复收藏 0 原文

夏夜暖风 2024-08-15 12:19:27

为了在不同分辨率的各种屏幕上保持宽高比，我必须手动将列宽设置为总和为 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：可能不是最好的方法，但它解决了我的问题！

奎克斯。

To maintain aspect ratio across various screens with different resolutions, I had to manually set the column width as percentages that summed up to 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: Might not be the best way to do this, but it solved my problem!

Kwex.

回复收藏 0 原文

回忆凄美了谁 2024-08-15 12:19:27

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

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

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

This should do the trick. Worked for me AUI 2.5.1

回复收藏 0 原文

~没有更多了~