我正在构建一个结合CSS网格的动态表,我希望将最左边的<th>
和<td>
移出一点。不太确定如何在<table>
的“内部”移动位于div内的特定元素。
基本上,这是我希望实现的目标:https://imgur.com/a/6Q9dKFT
以下是一个小提琴,显示了我正在使用的工具:https://jsfiddle.net/anr1exp2/
基本上,最左边的<td>
保留了我所有的项目名称,我只想略过一点,因为它与其余数据的位置太紧了。我将表格与CSS网格结合在一起时,不确定如何执行此操作。
PS:我只尝试使用CSS网格创建整个表,但是由于我的表是高度动态的,因此很难做到这一点,而且会非常痛苦。
答案 0 :(得分:1)
添加此样式
th:first-child, td:first-child {
min-width: 120px;
background-color: lightgreen;
text-align: center;
}
将最小宽度值调整为所需的任意值
还请注意,实际上您并没有为表格使用网格,它只是在其中一个网格单元格内
要在不更改布局的情况下执行此操作,请使用以下转换:
th:first-child, td:first-child {
transform: translateX(-18px);
}