html - Grid system as in excel

Question

how can I make a table in bootstrap / css to display a number of cells on columns and rows? For example 7 columns and 7 rows of cells Something like this

I tried with this

<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      1
    </div>
  </div>
</div>

but I don't really realize how I could position the lines, I don't have much experience in css.

Answer 1

simply apply your own css. Give the container the attribute and value: display: grid; to use the css-grid system. Then use grid-template-columns: repeat(7, min-content); to use 7 columns with the width of the content. Replace the 7 with the number of columns you want.

.container {
  display: grid;
  grid-template-columns: repeat(7, min-content);
  grid-gap: 5px;
  margin: 0 auto;
  width: min-content;
}

.container div {
  background-color: green;
  color: white;
  padding: 10px;
  text-align: center;
  width: min-content;
}

<div class="container">
  <div>G01 08:00</div>
  <div>G02 08:00</div>
  <div>G01 08:15</div>
  <div>G02 08:15</div>
  <div>G01 08:30</div>
  <div>G02 08:30</div>
  <div>G01 08:45</div>
  <div>G02 08:45</div>
  <div>G01 09:00</div>
  <div>G02 09:00</div>
  <div>G01 09:15</div>
  <div>G02 09:15</div>
  <div>G01 09:30</div>
  <div>G02 09:30</div>
  <div>G01 09:45</div>
  <div>G02 09:45</div>
  <div>G01 10:00</div>
  <div>G02 10:00</div>
  <div>G01 10:15</div>
  <div>G02 10:15</div>
  <div>G01 10:30</div>
  <div>G02 10:30</div>
  <div>G01 10:45</div>
  <div>G02 10:45</div>
  <div>G01 11:00</div>
  <div>G02 11:00</div>
  <div>G01 11:15</div>
  <div>G02 11:15</div>
  <div>G01 11:30</div>
  <div>G02 11:30</div>
  <div>G01 11:45</div>
  <div>G02 11:45</div>
</div>