如何使 w2grid 宽度为 100%？

如何解决如何使 w2grid 宽度为 100%？

有人用w2grid吗？

我不知道如何让它 100% 填满它的容器。

html 如下所示：

<div id="a" style="width:100%">   <!-- top left container-->
<div>This is a table header</div>
<div id="grid" style="width: 100% !important; height: 100%;"></div>

javascript 看起来像这样：

function addWatchlistTable() {
    $(function () {
        $('#grid').w2grid({
            name: 'grid',header: 'List of Names',columns: [
                { field: 'fname',caption: 'First Name',size: '20%' },{ field: 'lname',caption: 'Last Name',{ field: 'email',caption: 'Email',size: '30%' },{ field: 'sdate',caption: 'Start Date',size: '30%' }
            ],records: [
                { recid: 1,fname: "Peter",lname: "Jeremia",email: 'peter@mail.com',sdate: '2/1/2010' },{ recid: 2,fname: "Bruce",lname: "Wilkerson",email: 'bruce@mail.com',sdate: '6/1/2010' },{ recid: 3,fname: "John",lname: "McAlister",email: 'john@mail.com',sdate: '1/16/2010' },{ recid: 4,fname: "ravi",lname: "Zacharies",email: 'ravi@mail.com',sdate: '3/13/2007' },{ recid: 5,fname: "William",lname: "Dembski",email: 'will@mail.com',sdate: '9/30/2011' },{ recid: 6,fname: "David",lname: "Peterson",email: 'david@mail.com',sdate: '4/5/2010' }
            ]
        });
    });
}

尊重高度但不尊重宽度。有什么建议吗？

编辑：我无法弄清楚如何将应用程序简化为小提琴，因此此图像显示了我的意思。注意到 w2ui 网格右侧的浅蓝色空间了吗？网格拒绝填充容器。可能是因为分离器容器。

当我在chrome浏览器的元素面板中隔离grid css时，我看到div class="w2ui-grid-Box"中的宽度被硬编码为351px。如果我在“样式”面板中取消选中该宽度，则网格会扩展以填充容器宽度。如果我将 .w2ui-grid-Box 在我的 css 中设置为“width: 100% !important”，则不受尊重。

我下载了作者的 Simple-Grid 演示并运行了它。工作得很好。当我更改窗口大小时，网格会相应调整。所以我想这个问题在本质上可能更普遍，因为我在其他组件中看到了这种行为。它们作为独立组件工作正常，但当放置在另一个容器内时，自动调整大小无法工作。在这些类型的情况下，你们如何确定出了什么问题？

解决方法

您可以添加以下 CSS。

#grid{
width: 100% !important;
}
.w2ui-grid-box{
    width: 100% !important;
}

我终于想通了！我移动了

.w2ui-grid-box {
    width: '100%' !important;
}

到 main.css 文件的最底部，但即使这样也没有解决问题。但是后来我去掉了单引号，然后发现它起作用了！我在 css 中还有其他很多地方，我见过很多其他地方使用单引号或双引号大约 100% 没有问题，所以当删除它们时我感到非常惊讶。经验教训永远不要用引号，单引号或双引号，大约 100%！