首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用CSS网格移动特定的<td>元素?

使用CSS网格移动特定的<td>元素?
EN

Stack Overflow用户
提问于 2019-02-05 20:47:55
回答 1查看 63关注 0票数 0

我正在构建一个与CSS grid相结合的动态表,我希望将最左边的<th><td>稍微移出一点。不确定如何移动驻留在<table>“内部”的div中的特定元素。

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

这里有一个小提琴,展示了我正在使用的东西:https://jsfiddle.net/anr1exp2/

基本上,最左边的<td>保存了我所有的项目名称,我只想略过它,因为它与其他数据太紧密了。我不确定该怎么做,因为我正在将一个表格与CSS网格相结合。

PS:我试着只用CSS网格创建整个表格,但是因为我的表格是高度动态的,所以要做到这一点是非常困难的,而且是一个巨大的痛苦。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-05 21:37:40

添加此样式

代码语言:javascript
运行
AI代码解释
复制
th:first-child, td:first-child {
  min-width: 120px;
  background-color: lightgreen;
  text-align: center;
}

将最小宽度值调整为所需的值

还要注意的是,实际上您并没有使用表格的网格,它只是在一个网格单元中

updated fiddle

要在不更改布局的情况下执行此操作,请使用转换:

代码语言:javascript
运行
AI代码解释
复制
th:first-child, td:first-child {
  transform: translateX(-18px);
}

second fiddle

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54542802

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档