JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" id="formTypeGrille" class="p1 p2">
    <table class="tbConfigGrille">
        <tbody>
            <tr>
                <th colspan="4" class="pCentre">Les niveaux d’évaluation</th>
            </tr>
                                    <tr>
                            <td><input type="checkbox" name="niv1" value="1" onclick="cacherMontrer(this)" id="1" /><label for="1">A Aucune maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv2" value="2" onclick="cacherMontrer(this)" id="2" checked='checked'/><label for="2">I Maîtrise Insuffisante</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv3" value="3" onclick="cacherMontrer(this)" id="3" checked='checked'/><label for="3">F Maîtrise fragile</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv4" value="4" onclick="cacherMontrer(this)" id="4" checked='checked'/><label for="4">S Maîtrise satisfaisante</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv5" value="5" onclick="cacherMontrer(this)" id="5" /><label for="5">B Bonne Maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv6" value="6" onclick="cacherMontrer(this)" id="6" checked='checked'/><label for="6">TB Très Bonne maîtrise</label></td>
                        </tr>
                                            <tr>
                            <td><input type="checkbox" name="niv7" value="7" onclick="cacherMontrer(this)" id="7" /><label for="7">E Excellente maîtrise</label></td>
                        </tr>
         ...

CSS

.p1 {
  text-align: center;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 4px;
  padding-right: 4px;
}
.p2 {
  display: inline-block;
  vertical-align: top;
  background-color: rgb(255, 255, 255);
  text-align: left;
}
.tbConfigGrille {
  border-collapse: collapse;
  border: 3px solid rgb(0, 0, 0);
}
.tbConfigGrille tr {
  border-left: 3px solid rgb(0, 0, 0);
  border-right: 3px solid rgb(0, 0, 0);
}
.tbConfigGrille th {
  border-top: 3px solid rgb(0, 0, 0);
  border-left: 3px solid rgb(0, 0, 0);
  border-right: 3px solid rgb(0, 0, 0);
  background-color: rgb(192, 192, 192);
}
.gE {
  margin: auto;
  color: rgb(0, 0, 0);
  border-collapse: collapse;
  border: 3px solid black;
  text-align: left;
}
.gE tr,
.gE td {
  border: 3px solid black;
}
.gE th {
  background-color: rgb(192, 192, 192);
  text-align: center;
  border-left: 3px solid black;
}
.basE {
  border-bottom: 3px solid black;
}
.basF {
  border-bottom: 1px solid black;
}
.fr {
  background-color: rgb(255, 159, 159);
}
.fble {
  background-color: rgb(187, 255, 255);
}
.fbla {
  background-color: rgb(255, 255, 255);
}
input[type="radio"] {
  width: 25px;
  height: 25px;
}

JavaScript

function cacherMontrer(cases) {
  let checkbox = document.getElementById(cases.id),
    celluleTd = document.querySelectorAll(
      "td[data-ordre='" + event.target.value + "']"
    ),
    celluleTh = document.querySelectorAll(
      "th[data-ordre='" + event.target.value + "']"
    );
  // Si la checkbox est cochée
  if (checkbox.checked) {
    // Montrer la cellule de l'entête
    celluleTh[0].style.display = "";

    // Pour toutes les cellules des autres lignes
    for (let i = 0, l = 20; i < l; i++) {
      // Montrer la cellule
      celluleTd[i].style.display = "";
    }
    // Si la checkbox n'est pas cochée
  } else {
    // Cacher la cellule de l'entête
    celluleTh[0].style.display = "none";

    // Pour toutes les cellules des autres lignes
    for (let i = 0, l = 20; i < l; i++) {
      // Cacher la cellule
      celluleTd[i].style.display = "none";
    }
  }
}