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

时间:2019-02-05 20:47:55

标签: css3 vue.js grid css-grid

我正在构建一个结合CSS网格的动态表,我希望将最左边的<th><td>移出一点。不太确定如何在<table>的“内部”移动位于div内的特定元素。

基本上,这是我希望实现的目标:https://imgur.com/a/6Q9dKFT

以下是一个小提琴,显示了我正在使用的工具:https://jsfiddle.net/anr1exp2/

基本上,最左边的<td>保留了我所有的项目名称,我只想略过一点,因为它与其余数据的位置太紧了。我将表格与CSS网格结合在一起时,不确定如何执行此操作。

PS:我只尝试使用CSS网格创建整个表,但是由于我的表是高度动态的,因此很难做到这一点,而且会非常痛苦。

1 个答案:

答案 0 :(得分: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