Css 带水平滚动的dgrid

我有一个dgrid，它在一个包含许多列的表中显示数据。dgrid的默认布局会使页面上的所有列都可见，这意味着它们已折叠，并且无法看到每列中的完整标题或数据

我想显示展开的所有列，以查看其中包含的所有数据和标题信息。然后，我需要一个水平滚动条来横向滚动以查看所有列。通过将

dgrid row table

的默认布局从

table layout:fixed

更改为

table layout:auto

，我可以做到这一点，但随后列没有对齐

---

有没有一种方法可以使用具有许多列和水平滚动条的

dgrid/OnDemandGrid

？

我的解决方案不使用dgrid/OnDemandGrid，但仍然有效

1/将网格放入容器中，如下所示：

<div id="container">
    <div id="grid" style="width:100%;height:100%"></div>
</div>

3/在网格结构中，将元素“宽度”设置为“自动”：

（例如）

行的大小将足以完全显示其最大的内容，而div容器将具有滚动条

---

希望它能有所帮助。

dGrid支持这一开箱即用的功能。只需为dgrid设置宽度，并为每列设置最小值。如果列的宽度大于dgrid的宽度，它将水平滚动：

JS小提琴

请记住，默认情况下dgrid的高度设置为30em，因此您可能需要更改此设置，或者滚动可能脱离控件底部

您还可以在dojo测试中看到示例

---

你在提琴中提到了CSS文档——你能提供一个链接吗？我想在我的dgrid上获得自动高度，这让我发疯了@街灯这个案例是关于水平滚动的。有关自动高度，请参见

#container{
    height: 200px;
    width: 800px;
    overflow: auto;
}

var gridLayout = [  
                  {
                      defaultCell: { width: 8, editable: false, type: cells._Widget, styles: 'text-align: right;'  },
                      cells:    [
                                 { name: "ID"               , field: "id"           , width: "auto" },
                                 { name: "Reg."             , field: "reg"          , width: "auto", editable: true },
                                 { name: "Type"             , field: "type"         , width: "auto" }
                  ];

 .dgrid-grid {
    width: 100%
 }
 .dgrid-cell {
    width: 400px;
 }