移动特定的 element with CSS grid?

Question

我建立一个动态表CSS电网结合，我想搬出去最左边的<th>和<td>只是一点点。真的不知道如何将驻留在<table>“内部”一个div内的特定元素。

基本上，这是我想达到的目的：https://imgur.com/a/6Q9dKFT

这里是一个说明什么我正在使用一个小提琴：https://jsfiddle.net/anr1exp2/

基本上，最左边的<td>拥有我所有的项目名称，我只是想溜走，超过一点，因为它位于与其他数据太紧。不知道如何做到这一点，因为我结合了表CSS网格。

PS：我曾尝试创建仅适用于CSS网格整个表，但因为我的表在很大程度上动态的，它是超级难做到这一点，只是一个巨大的痛苦。

Answer 1

添加这种风格

th:first-child, td:first-child {
  min-width: 120px;
  background-color: lightgreen;
  text-align: center;
}

调整最小宽度值，以任何你想要的

另外请注意，在您使用网格，你的表没有现实中，它只是里面的网格单元之一

updated fiddle

要做到这一点不改变布局，使用转换：

th:first-child, td:first-child {
  transform: translateX(-18px);
}

second fiddle