JSFiddle - React, Tailwind, and code Playground

HTML

<table class="bfmini-table striped" width="100%" cellspacing="0" cellpadding="5" border="1" align="center">
  <thead>
    <tr>
      <td></td>
      <th align="td_width center"><b>A</b></th>
      <th align="td_width center"><b>B</b></th>
      <th align="td_width center"><b>C</b></th>
      <th align="td_width center"><b>D</b></th>
      <th align="td_width center"><b>E</b></th>
      <th align="td_width center"><b>F</b></th>
      <th align="td_width center"><b>G</b></th>
      <th align="td_width center"><b>H</b></th>
      <th align="td_width center"><b>I</b></th>
      <th align="td_width center"><b>J</b></th>
      <th align="td_width center"><b>K</b></th>
      <th align="td_width center"><b>L</b></th>
      <th align="td_width center"><b>M</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
    <tr class="now"> </tr>
    <tr>
      <td class="td_width">08h<br>-<br>09h</td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
    </tr>
    <tr>
      <td class="td_width">09h<br>-<br>10h</td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre" align="center"></td>
      <td class="libre"...

CSS

tbody{
  background: pink;
  position: relative;
}

.now{
  position: absolute;
  background-color: purple;
  height: 3px;
  width: 100%;
  z-index: 1;
  top: 4.5%;
}

JavaScript

let date = new Date();
let hauteur = null;
if (date.getHours() >8 && date.getHours() < 17)
{
  let heure_debut = 8;
  let heure_fin = 17;
  let nb_heures = heure_fin - heure_debut;
	//let hauteur_entete = 4.5; //hauteur de l'entete
  let hauteur_entete = 0; //hauteur de l'entete plus utile en séparant thead et tbody et en utilisant tbody pour le position: relative au lieu de table
	let hauteur_heures = 100 - hauteur_entete; // hauteur des lignes des horaires
  let ratio_taille_heure = hauteur_heures / nb_heures; //taille d'une seule heure
  
	hauteur_heure_actuelle = (date.getHours() - heure_debut) * ratio_taille_heure;
  hauteur_minutes = date.getMinutes()/60 *ratio_taille_heure;
  hauteur = hauteur_entete + hauteur_heure_actuelle + hauteur_minutes;
  console.log(hauteur);
  document.getElementsByClassName("now")[0].style.top=hauteur+"%";
}