Добавление линий столбцов в систему координат CSS - PullRequest
Новая
       13

Добавление линий столбцов в систему координат CSS

1 голос
/ 22 октября 2019

Я хотел бы показать некоторые столбцы сетки в виде линии. Я попытался сделать это с разрывом сетки, но таким образом положение элементов в div меняется.

In Css 

.MyTable{
  width:auto;
  height:1000px;
  display: grid;
  grid-template-columns: repeat(365, 1fr);
  border: 1px solid black;
}

In Html 

<div class="MyTable"></div>

Например: я хотел бы видеть строки столбцов для каждого 7-го индекса сетки, даже если нет элементавнутри элемента div.

Пример вступления

Заранее спасибо.

1 Ответ

0 голосов
/ 22 октября 2019

Может быть, вам поможет 

.MyTable {
  width: auto;
  height: 1000px;
  display: grid;
  grid-template-columns: repeat(365, 1fr);
  counter-reset: counter -1;
  margin-top: 1.5em;
}

div {
  border: 1px solid black;
  width: 1em;
  counter-increment: counter;
}

.MyTable div:nth-child(7n) {
  border-color: red;
  position: relative;
}

.MyTable div:nth-child(7n)::before {
  content: counter(counter);
  position: absolute;
  top: -1.4em;
}
<div class="MyTable">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
...