使用CSS网格移动特定元素？

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