YUI Datatable 宽度

Question

这可能看起来是一个基础问题，但我在设置YUI datatable的表格宽度为100%方面遇到了麻烦。

我尝试过如下操作：

#dtContainer {
    width: 100%;
}

#dtContainer table {
    width: 100%
}

但是这些方法都没有起作用。

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

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

- Abe

Answer 1

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

- Matt Calderaro

---

对我有用。并在postRender中添加以下内容，以使标题和正文正确对齐： $（“ div.yui-dt-hd”）.css（'width'，'auto'）; $（“ div.yui-dt-bd”）.css（'width'，'auto'）; - capdragon

如果不起作用，请使用 setAttrs 而不是 setAttributes（YUI3）。 - JGeo

Answer 2

原来解决方案非常简单：

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

- Abe

---

在这种情况下，您应该选择Matt Calderaro的答案作为正确答案，而不是您自己没有使用的答案。 - Paul

Answer 3

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

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

问题在于预渲染样式是无意义的，因为JavaScript正在构建表格，只有后渲染才能正常工作。

- Singularity

---

谢谢。我没有使用你的实现，但它确实指引我朝着正确的方向。我基本上使用了YUI Dom方法setAttribute来设置大小，触发YUI数据表格上的render()事件的方法。 - Abe

Answer 4

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

这应该可以解决问题。在我的AUI 2.5.1上有效。

- Shmulinson

Answer 5

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

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

- Singularity

Answer 6

为了在不同分辨率的屏幕上保持纵横比，我不得不手动将列宽设置为百分比，使其总和为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>

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

Kwex。

- Kwex