JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,fc-3.2.1,fh-3.1.1/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,fc-3.2.1,fh-3.1.1/datatables.min.css">
<table id="planSceFormation">
  <thead class="titre">
    <tr>

      <th class="entete">Planning de Formation L1</th>



      <th class=indic_3 colspan=7> Semaine 18 </th>
      <th class=indic_2 colspan=7> Semaine 19 </th>
      <th class=indic_3 colspan=7> Semaine 20 </th>
      <th class=indic_2 colspan=7> Semaine 21 </th>
    </tr>
    <tr>

      <th class="titlecodeform">Code Formation</th>


      <th class="date"> 02/05 </th>
      <th class="date"> 03/05 </th>
      <th class="date"> 04/05 </th>
      <th class="date"> 05/05 </th>
      <th class="date"> 06/05 </th>
      <th class="ferie"> 07/05 </th>
      <th class="ferie"> 08/05 </th>
      <th class="date"> 09/05 </th>
      <th class="date"> 10/05 </th>
      <th class="date"> 11/05 </th>
      <th class="date"> 12/05 </th>
      <th class="date"> 13/05 </th>
      <th class="ferie"> 14/05 </th>
      <th class="ferie"> 15/05 </th>
      <th class="date"> 16/05 </th>
      <th class="date"> 17/05 </th>
      <th class="date"> 18/05 </th>
      <th class="date"> 19/05 </th>
      <th class="date"> 20/05 </th>
      <th class="ferie"> 21/05 </th>
      <th class="ferie"> 22/05 </th>
      <th class="date"> 23/05 </th>
      <th class="date"> 24/05 </th>
      <th class="date"> 25/05 </th>
      <th class="date"> 26/05 </th>
      <th class="date"> 27/05 </th>
      <th class="ferie"> 28/05 </th>
      <th class="ferie"> 29/05 </th>
    </tr>
  </thead>
  <tbody>

    <tr>

      <td class="codeform">ITI2356</td>
      <td class="emptycell" id="cell1" title="ITI2356_20160502">&nbsp; </td>
      <td class="emptycell" id="cell2" title="ITI2356_20160503">&nbsp; </td>
      <td class="emptycell" id="cell3" title="ITI2356_20160504">&nbsp; </td>
      <td class="emptycell"...

CSS

/* Mise en forme des label (formulaires)*/

label {
  display: block;
  width: 150px;
  float: left;
}


/* encadré des différents filtres du planning*/

#filtrePlan {
  margin-top: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
  width: 300px;
  border: 1px solid black;
}


/* espace vide*/

#empty {
  visibility: hidden
}


/* encadré du bouton pour ajouter une session*/

#newSession {
  margin-top: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
  width: 300px;
  height: 164px;
  border: 1px solid black;
  display: inline-block;
  text-align: center;
}


/* mise en forme du bouton ajouter une session*/

#addButton {
  line-height: 164px;
  vertical-align: middle;
}


/*remplissage des cellules correspondant aux jours fériés*/

.ferie,
.indic_indefini {
  background-color: rgb(209, 209, 209);
}


/*mise en forme des cellules de date et semaines*/

.date,
.ferie,
.indic_1,
.indic_2,
.indic_3,
.indic_4,
.indic_indefini {
  border: 1px solid black;
  text-align: center;
  min-width: 54px;
  font-weight: bold;
  height: 17px;
}

.emptycell {
  border: 1px solid black;
  text-align: center;
  font-weight: bold;
  height: 17px;
}


/*remplissage de la semaine avec indicateur 1 : Favorable*/

.indic_1 {
  background-color: rgb(0, 204, 0);
}


/*remplissage de la semaine avec indicateur 2 : Peu Favorable*/

.indic_2 {
  background-color: rgb(255, 255, 0);
}


/*remplissage de la semaine avec indicateur 3 : Défavorable*/

.indic_3 {
  background-color: rgb(255, 153, 0);
}


/*remplissage de la semaine avec indicateur 4 : A éviter*/

.indic_4 {
  background-color: rgb(255, 0, 0);
}

.entete {
  font-weight: bold;
  border: 1px solid black;
  text-align: center;
  height: 17px;
  position: fixed vertical;
  margin-top: 1px;
}

.titlechefdept,
.titlechefgroupe {
  border: 1px solid black;
  min-width: 200px;
}

.titlecodeform {
  border: 1px solid black;
  min-width: 150px;
}

.titlecodemetier {
  border: 1px solid black;
  min-width: 80px;
}

.chefdept,
.chefgroupe {
 ...

JavaScript

$('#planSceC3P').DataTable({

    paging: false,
    scrollX: true,
    scrollY: "100px",
    fixedColumns: {
      leftColumns: 1
    },
    rowsGroup: [0],
    order: [
      [0, 'desc']
    ],
    columnDefs: [{
      targets: '_all',
      orderable: false
    }]

  }).draw(false);
  
	$.fn.dataTable.ext.errMode = 'none';
  $('#planSceFormation').DataTable({

    paging: false,
    scrollX: true,
    scrollY: "100px",
    fixedColumns: {
      leftColumns: 1
    },
    rowsGroup: [0],
    order: [
      [0, 'desc']
    ],
    columnDefs: [{
      targets: '_all',
      orderable: false
    }]

  }).draw(false);



$('.formation').tooltip({
  delay: 0,
  track: true,
  fade: 250
});