Переместить определенный элемент <td>с помощью сетки CSS?

Question

Я строю динамическую таблицу в сочетании с сеткой CSS, и я хочу переместить крайние левые <th> и <td> чуть чуть.Не совсем уверен, как переместить конкретный элемент, который находится внутри div "внутри" a <table>.

По сути, вот чего я хочу достичь: 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;
}

Настройте значение минимальной ширины на то, что вы хотите

Также обратите внимание, что на самом деле вы не используете сетку для своей таблицы, она просто внутри одного изячейки сетки

обновленная скрипта

Чтобы сделать это без изменения макета, используйте преобразование:

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

вторая скрипта