使用css网格的制表器表格宽度问题答案

【问题标题】：Tabulator table width problem using css grid使用css网格的制表器表格宽度问题
【发布时间】：2019-11-10 21:56:50
【问题描述】：

我在使用 css 网格进行布局的页面中有一个 Tabulator 表。当我调整浏览器的大小时，我希望表格随着视图的增加和缩小。这在 css 网格之外工作正常，但在我的 css 网格内时失败。使用 css 网格时，当浏览器变宽时 Tabulator 表格会正确展开，但在浏览器视图变窄时不会缩小。相反，滚动条出现并且表格保持宽。

var data = [
    { name: '1', description: 'Description of thing 1', location: 'Location 1' },
    { name: '2', description: 'Description of thing 2', location: 'Location 2' },
    { name: '3', description: 'Description of thing 3', location: 'Location 3' },
];
var cols = [
    { field: 'name', title: 'Name', width: '20%', widthGrow: 1, widthShrink: 1  },
    { field: 'description', title: 'Description', width: '30%', widthGrow: 1, widthShrink: 1    },
    { field: 'location', title: 'Location', width: '50%', widthGrow: 1, widthShrink: 1   },
];

var config = {
    columns: cols,
    data: data,
    layout: 'fitColumns'
};
var mytable = new Tabulator("#mytable", config);

.main-body {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
}


/* If I use the below css instead, the table shrinking works correctly. */
/*
.main-body {
    width: 100%;
}
*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.js"></script>


When the view is made wider, the table expands correctly.
When it's made narrower, the table does not shrink correctly.
In the snippet view, it's easiest to use "full page" mode to see the issue.

<div class="main-body">
  <div class="main-content">
    <div id="mytable"></div>
  </div>
</div>

如果我改为更改 main-body css 以删除网格，表格将正确调整大小。

.main-body {
    width: 100%;
}

这里的网格是为了创建一个简化的示例而设计的。我的实际网格更复杂，所以我更愿意在这里继续使用网格。

如何让我的制表符在此处随浏览器宽度展开和收缩？

这是一个使用 css 网格并显示表格调整大小问题的小提琴： https://jsfiddle.net/cfarmerga/wtqo65uc/26/

这是一个不使用 css 网格的小提琴，并显示正确调整大小的表格： https://jsfiddle.net/cfarmerga/wtqo65uc/29/

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
公平点。我添加了这个，但这个问题在小提琴中更容易看到，因为该视图可以更轻松地调整结果视图部分的大小。

标签： css css-grid tabulator

【解决方案1】：

不出所料，这是我使用 CSS 网格而不是制表符本身的问题。这篇关于 CSS 网格井喷的帖子很有帮助：https://css-tricks.com/preventing-a-grid-blowout/

只需要更改我的 css 来为网格提供一个明确的最小尺寸。

.main-body {
    ...
    grid-template-columns: minmax(0, 1fr);
    ...
}

【讨论】：