Javascript DGrid：使列适合数据

我使用的DGrid如下所示：

var dgrid = new OnDemandGrid({
    store: myStore,
    columns: [
        {field: "name"},
        {field: "age"}
    ],
    showHeader: false
},divName);
dgrid.startup();

它目前正在按如下方式调整自身大小：

var dgrid = new OnDemandGrid({
    store: myStore,
    columns: [
        {field: "name"},
        {field: "age"}
    ],
    showHeader: false
},divName);
dgrid.startup();

我希望第一列的大小适合最长的数据：

如果从存储中删除了最长的名称，则第一行的大小应如下所示：

var dgrid = new OnDemandGrid({
    store: myStore,
    columns: [
        {field: "name"},
        {field: "age"}
    ],
    showHeader: false
},divName);
dgrid.startup();

---

编辑：我已经看到了关于调整DGrid大小的问题，但没有提到如何解决这个问题

---

Edit2：有人问了同样的问题。

你可以在

CSS

中使用

minwidth

。当内容小于它时，它将保持

最小宽度

，当内容大于宽度时，它将展开以适应内容

您可以这样使用它：

div {
    vertical-align:top;
}

.Container {
    border:1px solid Black;
}

.name {
    display:inline-block;
    height:150px;
    text-align:center;
    min-width:100px;
}

.number {
    display:inline-block;
    height:150px;
    text-align:center;
    width:100px;
}

你可以在这里看到->

请参见“最小宽度”属性允许内容“适合”

---

希望这有帮助

为什么不在

CSS

中使用

minwidth

？当内容小于它时，它将保持

最小宽度

，如果内容大于宽度，它将扩展以适合内容。谢谢您的回答！我不知道这会有什么帮助。为了使用你提议的

min width

方法，我需要知道某个东西的最小宽度是多少。我想我可能能跟踪这一点，但这似乎是一个大麻烦。我真正想要的是DGrid对象的一些属性，比如-makecolumn minimum.@sixtyfootersdude您根本不需要知道

minwidth

。保持非常低的

最小宽度

例如50px或20px。当您的内容超过指定的最小宽度时，浏览器将确保容器始终足够扩展以完全适合内容。这里的诀窍是，由于

min width

将非常低，因此您的浏览器将始终这样做。因此，本质上，您的容器将与您的内容一样动态@sixtyfootersdude您根本不需要指定任意的

min width

。只需将其保持在足够低的位置，以便内容的宽度始终大于此最小宽度。我希望你能明白这一点。@sixtyfootersdude为了说明这一点，请看这里的小提琴->。请注意，内容的最小宽度仅为15px（您也可以进一步缩小）。但是，您会看到每个框都经过了“调整”以适应内容。感谢JSFIDLE。我知道你对内联块做了什么。这是构建类似布局的一种很酷的方式。不幸的是，我使用的是DGrid（并且不能中断它-我需要自动更新、选择等功能）。我创建了一个JSFIDLE，如果您想尝试将CSS应用于它，您可以在这里找到它：