Saya ingin menunjukkan beberapa kolom grid sebagai garis. Saya telah mencoba membuatnya dengan celah kisi, tetapi dengan cara ini posisi elemen di div berubah.

Dalam Css

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

Dalam HTML

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

Sebagai contoh: Saya ingin melihat baris kolom untuk setiap indeks grid ke-7 meskipun tidak ada item di dalam elemen div.

Contoh penampilan

Terima kasih sebelumnya.

1
NiceCodeBro 22 Oktober 2019, 11:53

1 menjawab

Jawaban Terbaik

Mungkin membantu Anda

.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>
0
Andrey Fedorov 22 Oktober 2019, 09:34